共享路由

编辑页面

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


For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.

为匹配相同的 URL 但使用不同的布局,请使用带有重叠子路由的 。这种模式在原生应用中非常常见。例如,在 X 应用中,个人资料可以在每个标签页中查看(例如主页、搜索和个人资料)。但是,访问此路由只需要一个 URL。

在下面的示例中,src/app/_layout.tsx 是标签栏,并且每个路由都有自己的页眉。src/app/(profile)/[user].tsx 路由会在每个标签页之间共享。

src
app
  _layout.tsx
  (home)
   _layout.tsx
   [user].tsx
  (search)
   _layout.tsx
   [user].tsx
  (profile)
   _layout.tsx
   [user].tsx

当页面重新加载时,会渲染第一个按字母顺序匹配的结果。

可以通过在路由中包含组名来直接导航到共享路由。例如,/(search)/baconbrix 会在“search”布局中导航到 /baconbrix

数组

数组语法是一个仅在原生应用开发中才独有的高级概念。

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

要区分这两个路由,请使用布局的 segment 属性:

src/app/(home,search)/_layout.tsx
export default function DynamicLayout({ segment }) { if (segment === '(search)') { return <SearchStack />; } return <Stack />; }

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

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

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

要点

  • 你只能为当前导航器提供分组。
  • 使用数组语法时,如果有两个组(例如,(one)/(two)),则只使用最后一个组的 segment 来匹配路由。
  • 如果至少有两个组的 initialRouteName,但没有提供默认的 initialRouteName,则使用第一个组的 initialRouteName