This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

了解如何使用 Expo Router 定义共享路由或使用数组以不同布局多次使用同一路由。

要匹配具有不同布局的相同 URL，请使用具有重叠子路由的 groups。这种模式在原生应用中非常常见。例如，在 X 应用中，个人资料可以在每个标签页中查看（如首页、搜索和个人资料）。然而，访问此路由只需要一个 URL。

🌐 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.

在下面的示例中，src/app/_layout.tsx 是选项卡栏，每个路由都有自己的头部。src/app/(profile)/[user].tsx 路由在每个选项卡之间共享。

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

组段不是 URL 的一部分，所以每个共享的路由都会匹配相同的 URL。Expo Router 会根据你所在的组来选择使用哪个路由。应用内导航会保持当前组。页面刷新、书签、共享 URL 和深度链接都是冷链接。冷链接没有当前组，所以 Expo Router 会渲染第一个按字母顺序匹配的页面。因此，同一个 URL 在应用内导航后可能显示一个页面，而页面刷新后可能显示另一个页面。

🌐 Group segments are not part of the URL, so every shared route matches the same URL. Expo Router uses the group you are in to select between them. In-app navigation keeps the current group. A page reload, a bookmark, a shared URL, and a deep link are all cold links. A cold link has no current group, so Expo Router renders the first alphabetical match. The same URL can therefore render one screen after in-app navigation and a different screen after a page reload.

共享路由可以通过在路由中包含组名直接导航。例如，/(search)/baconbrix 在“搜索”布局中导航到 /baconbrix。当链接必须总是打开某个特定组时，使用这种形式。

🌐 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. Use this form when a link must always open one specific group.

警告 不要使用共享路由给不同用户角色展示不同版本的界面。URL 不会携带用户角色，所以冷链接无法选择正确的组，受保护路由 也无法改变这一点。应该只声明一次界面，用 Stack.Protected 来控制访问。

数组

🌐 Arrays

数组语法是一种高级概念，它在原生应用开发中独具特色。

与其使用不同的布局多次定义相同的路由，不如使用数组语法 (,) 来复制一个组的子路由。例如，src/app/(home,search)/[user].tsx — 在内存中创建 src/app/(home)/[user].tsx 和 src/app/(search)/[user].tsx。

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

要区分这两条路由，请使用布局的 segment 属性：

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

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

  return <Stack />;
}

要启用数组语法，请在动态布局中使用unstable_settings对象为每个组指定anchor：

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

export const unstable_settings = {
  anchor: 'home',
  search: {
    anchor: 'search',
  },
};

export default function DynamicLayout({ segment }) {
  %%placeholder-start%% ... %%placeholder-end%%
}

在上述示例中，home 路由是 home 组和应用的默认路由。search 路由是 search 组的默认路由。

🌐 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

• 你只能为当前导航器提供组。
• 使用数组语法时，如果有两个分组（例如 (one)/(two)），则只有最后一个分组的片段用于匹配路由。
• 如果至少有两个组锚点，但没有提供默认的 anchor，则使用第一个组的锚点。