共享路由

编辑

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


为了匹配相同的 URL 但使用不同的布局,请使用 和重叠的子路由。这个模式在原生应用程序中非常常见。例如,在 X 应用中,个人资料可以在每个标签页中查看(如首页、搜索和个人资料)。然而,访问该路由仅需要一个 URL。

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

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

重新加载页面时,渲染第一个字母顺序匹配的路由。

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

数组

数组语法是一个独特于原生应用开发的高级概念。

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

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

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

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

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)),仅最后一个组的段用于匹配路由。
  • 如果至少有两个组的 initialRouteNames,但没有提供默认的 initialRouteName,则使用第一个组的 initialRouteName