Expo Router notation

Learn how to use special filenames and notation to expressively define your app's navigation tree within your project's file structure.

Expo Router notation

When you look inside the app directory in a typical Expo Router project, you'll see a lot more than some simple file and directory names. What do the parentheses and brackets mean? Let's learn the significance of file-based routing notation and how it allows you to define complex navigation patterns.

Simple names/no notation

Regular file and directory names without any notation signify static routes. Their URL matches exactly as they appear in your file tree. So, a file named favorites.tsx inside the feed directory will have a URL of /feed/favorites.

Square brackets

If you see square brackets in a file or directory name, you are looking at a dynamic route. The name of the route includes a parameter that can be used when rendering the page. The parameter could be either in a directory name or a file name. For example, a file named [userName].tsx will match /evanbacon, /expo, or another username. Then, you can access that parameter with the useLocalSearchParams hook inside the page, using that to load the data for that specific user.

Parentheses

A directory with its name surrounded in parentheses indicates a route group. These directories are useful for grouping routes together without affecting the URL. For example, a file named app/(tabs)/settings.tsx will have /settings for its URL, even though it is not directly in the app directory.

Route groups can be useful for simple organization purposes, but often become more important for defining complex relationships between routes.

index.tsx files

Just like on the web, an index.tsx file indicates the default route for a directory. For example, a file named profile/index.tsx will match /profile. A file named (tabs)/index.tsx will match /, effectively becoming the default route for your entire app.

_layout.tsx files

_layout.tsx files are special files that are not pages themselves but define how groups of routes inside a directory relate to each other. If a directory of routes is arranged as a stack or tabs, the layout route is where you would define that relationship by using a stack navigator or tab navigator component.

Layout routes are rendered before the actual page routes inside their directory. This means that the _layout.tsx directly inside the app directory is rendered before anything else in the app, and is where you would put the initialization code that may have previously gone inside an App.jsx file.

Plus sign

Routes starting with a + have special significance to Expo Router, and are used for specific purposes. One example is +not-found, which catches any requests that don't match a route in your app. +html is used to customize the HTML boilerplate used by your app on web. +native-intent is used to handle deep links into your app that don't match a specific route, such as links generated by third party services.

Route notation applied

Consider the following project file structure to identify the different types of routes represented:

• app/about.tsx is a static route that matches /about.
• app/users/[userId].tsx is a dynamic route that matches /users/123, /users/456, and so on.
• app/(tabs) is a route group. It will not factor into the URL, so /feed will match app/(tabs)/feed.tsx.
• app/(tabs)/index.tsx is the default route for the (tabs) directory, so it will be the initially-focused tab, and will match the / URL.
• app/(tabs)/_layout.tsx is a layout file defining how the three pages inside app/(tabs)/ relate to each other. If you use a tab navigator component inside of this file, then those screens will be arranged as tabs.
• app/_layout.tsx is the root layout file, and is rendered before any other route in the app.
• +not-found.tsx is a special route that will be displayed if the user navigates to a route that doesn't exist in your app.