Expo Router 符号

了解如何使用特殊的文件名和符号在项目的文件结构中富有表现力地定义应用程序的导航树。

当你查看一个典型的 Expo Router 项目中的 app 目录时，你会看到远比简单的文件和目录名称要多的东西。括号和方括号意味着什么？让我们学习基于文件的路由符号的意义，以及它如何允许你定义复杂的导航模式。

路由符号的类型

简单名称/无符号

没有任何符号的常规文件和目录名称表示 静态路由。它们的 URL 完全与文件树中的显示方式相匹配。因此，位于 feed 目录中的名为 favorites.tsx 的文件将具有 /feed/favorites 的 URL。

方括号

如果你在文件或目录名称中看到方括号，您正在查看 动态路由。路由的名称包含一个参数，可以在渲染页面时使用。该参数可以在目录名称或文件名称中。例如，名为 [userName].tsx 的文件将匹配 /evanbacon，/expo 或其他用户名。然后，你可以使用 useLocalSearchParams 钩子在页面中访问该参数，以加载该特定用户的数据。

括号

其名称被括号包围的目录表示 路由组。这些目录用于将路由组合在一起，而不影响 URL。例如，名为 app/(tabs)/settings.tsx 的文件将具有 /settings 的 URL，即使它并不直接位于 app 目录中。

路由组对于简单的组织目的可能很有用，但通常在定义路由之间的复杂关系时变得更加重要。

index.tsx 文件

就像在网络上一样，index.tsx 文件表示目录的默认路由。例如，名为 profile/index.tsx 的文件将匹配 /profile。名为 (tabs)/index.tsx 的文件将匹配 /，有效地成为你整个应用的默认路由。

_layout.tsx 文件

_layout.tsx 文件是特殊文件，它们本身不是页面，但定义了目录中一组路由之间的关系。如果一组路由安排为堆栈或选项卡，布局路由就是你将使用堆栈导航器或选项卡导航器组件定义该关系的地方。

布局路由在其目录内的实际页面路由之前被渲染。这意味着直接位于 app 目录中的 _layout.tsx 会在应用程序中的其他内容之前被渲染，并且是你放置之前可能放在 App.jsx 文件中的初始化代码的地方。

加号

包含 + 的路由对 Expo Router 有特殊意义，并用于特定用途。一些例子：

• +not-found，捕获任何不匹配你应用中的路由的请求。
• +html 用于定制你在 web 上使用的 HTML 模板。
• +native-intent 用于处理深层链接到你应用的链接，这些链接不匹配特定路由，例如第三方服务生成的链接。
• +middleware 用于在路由被渲染之前运行代码，使你能够对每个请求执行身份验证或重定向等任务。

路由符号的应用

考虑以下项目文件结构以识别不同类型的路由：

• app/about.tsx 是一个静态路由，匹配 /about。
• app/users/[userId].tsx 是一个动态路由，匹配 /users/123，/users/456 等等。
• app/(tabs) 是一个路由组。它不会影响 URL，因此 /feed 将匹配 app/(tabs)/feed.tsx。
• app/(tabs)/index.tsx 是 (tabs) 目录的默认路由，因此它将是最初聚焦的选项卡，并将匹配 / URL。
• app/(tabs)/_layout.tsx 是一个布局文件，定义了 app/(tabs)/ 中的三页之间的关系。如果你在此文件中使用选项卡导航器组件，那么这些屏幕将被安排为选项卡。
• app/_layout.tsx 是根布局文件，并且在应用中的任何其他路由之前被渲染。
• +not-found.tsx 是一个特殊路由，如果用户导航到你应用中不存在的路由，则会显示该路由。