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 但使用不同的布局,请使用带有重叠子路由的 组。这种模式在原生应用中非常常见。例如,在 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

组片段不属于 URL,因此每个共享路由都匹配相同的 URL。Expo Router 会使用你所在的组来选择对应路由。应用内导航会保留当前组。页面重新加载、书签、共享 URL 和深层链接都属于冷链接。冷链接没有当前组,因此 Expo Router 会渲染按字母顺序排列的第一个匹配项。因此,同一个 URL 在应用内导航后可能会渲染一个屏幕,而在页面重新加载后则会渲染另一个屏幕。

可以在路由中包含组名,以直接导航到共享路由。例如,/(search)/baconbrix 会导航到「search」布局中的 /baconbrix。当链接必须始终打开某个特定组时,请使用这种形式。

数组

不要为不同的布局多次定义相同的路由,而是使用数组语法 (,) 来复制组的子路由。例如,src/app/(home,search)/[user].tsx — 会在内存中创建 src/app/(home)/[user].tsx 和 src/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 对象为每个组指定 anchor:

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

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

要点

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