Source: https://docs.expo.dev/router/advanced/shared-routes

Hide navigation

Search

Ctrl K

Home Guides EAS Reference Learn

Archive Expo Snack Discord and Forums Newsletter

Shared routes

Edit page

Copy page

Learn how to define shared routes or use arrays to use the same route multiple times with different layouts using Expo Router.

Edit page

Copy page

---

To match the same URL with different layouts, use groups with overlapping child routes. This pattern is very common in native apps. For example, in the X app, a profile can be viewed in every tab (such as home, search, and profile). However, there is only one URL that is required to access this route.

In the example below, app/_layout.tsx is the tab bar and each route has its own header. The app/(profile)/[user].tsx route is shared between each tab.

app

 _layout.tsx

 (home)

  _layout.tsx

  [user].tsx

 (search)

  _layout.tsx

  [user].tsx

 (profile)

  _layout.tsx

  [user].tsx

When reloading the page, the first alphabetical match is rendered.

Shared routes can be navigated directly by including the group name in the route. For example, /(search)/baconbrix navigates to /baconbrix in the "search" layout.

Arrays

---

Array syntax is an advanced concept that is unique to native app development.

Instead of defining the same route multiple times with different layouts, use the array syntax (,) to duplicate the children of a group. For example, app/(home,search)/[user].tsx — creates app/(home)/[user].tsx and app/(search)/[user].tsx in memory.

To distinguish between the two routes use a layout's segment prop:

app/(home,search)/_layout.tsx

Copy

export default function DynamicLayout({ segment }) { if (segment === '(search)') { return <SearchStack />; } return <Stack />; }

To enable the array syntax, specify the initialRouteName for each group using unstable_settings object in the dynamic layout:

app/(home,search)/_layout.tsx

Copy

export const unstable_settings = { initialRouteName: 'home', search: { initialRouteName: 'search', }, }; export default function DynamicLayout({ segment }) { %%placeholder-start%% ... %%placeholder-end%% }

In the above example, the home route is the default route for the home group and the app. The search route is the default route for the search group.

Key points

---

• You can only provide groups for the current navigator.
• When using the array syntax, if there are two groups (for example, (one)/(two)), only the last group's segment is used for matching the route.
• If there are at least two group initialRouteNames, but a default initialRouteName is not provided, the first group's initialRouteName is used.