Skip to main content
Glama
shared-routes.md2.35 kB
--- title: Shared routes description: Learn how to define shared routes or use arrays to use the same route multiple times with different layouts using Expo Router. --- To match the same URL with different layouts, use [**groups**](/router/basics/notation/#parentheses) 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. > 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: ```tsx app/(home,search)/_layout.tsx if (segment === '(search)') { return ; } return ; } ``` To enable the **array syntax**, specify the [`initialRouteName`](/router/advanced/router-settings/#initialroutename) for each group using `unstable_settings` object in the dynamic layout: {/* prettier-ignore */} ```tsx app/(home,search)/_layout.tsx initialRouteName: 'home', search: { initialRouteName: 'search', }, }; /* @hide ... */ /* @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.

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/jaksm/expo-docs-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server