Expo Router 符号

了解如何使用特殊文件名和符号在项目文件结构中清晰地定义应用的导航树。

当你查看典型的 Expo Router 项目中的应用目录时，你会看到比一些简单的文件和目录名称更多内容。括号和方括号是什么意思？让我们了解基于文件的路由符号的重要性，以及它如何帮助你定义复杂的导航模式。

¥When you look inside the app directory in a typical Expo Router project, you'll see a lot more than some simple file and directory names. What do the parentheses and brackets mean? Let's learn the significance of file-based routing notation and how it allows you to define complex navigation patterns.

路由符号类型

¥Types of route notation

简单名称/无符号

¥Simple names/no notation

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

¥Regular file and directory names without any notation signify static routes. Their URL matches exactly as they appear in your file tree. So, a file named favorites.tsx inside the feed directory will have a URL of /feed/favorites.

方括号

¥Square brackets

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

¥If you see square brackets in a file or directory name, you are looking at a dynamic route. The name of the route includes a parameter that can be used when rendering the page. The parameter could be either in a directory name or a file name. For example, a file named [userName].tsx will match /evanbacon, /expo, or another username. Then, you can access that parameter with the useLocalSearchParams hook inside the page, using that to load the data for that specific user.

括号

¥Parentheses

名称用括号括起来的目录表示路由组。这些目录可用于在不影响 URL 的情况下将路由分组。例如，名为 app/(tabs)/settings.tsx 的文件的 URL 会包含 /settings，即使它并不直接位于应用目录中。

¥A directory with its name surrounded in parentheses indicates a route group. These directories are useful for grouping routes together without affecting the URL. For example, a file named app/(tabs)/settings.tsx will have /settings for its URL, even though it is not directly in the app directory.

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

¥Route groups can be useful for simple organization purposes, but often become more important for defining complex relationships between routes.

index.tsx 文件

¥index.tsx files

与 Web 一样，index.tsx 文件指示目录的默认路由。例如，名为 profile/index.tsx 的文件将匹配 /profile。名为 (tabs)/index.tsx 的文件将与 / 匹配，从而有效地成为整个应用的默认路由。

¥Just like on the web, an index.tsx file indicates the default route for a directory. For example, a file named profile/index.tsx will match /profile. A file named (tabs)/index.tsx will match /, effectively becoming the default route for your entire app.

_layout.tsx 文件

¥_layout.tsx files

_layout.tsx 文件是特殊文件，它们本身不是页面，但定义了目录内路由组之间的关系。如果路由目录以堆栈或选项卡的形式排列，则布局路由是你可以使用堆栈导航器或选项卡导航器组件定义这种关系的地方。

¥_layout.tsx files are special files that are not pages themselves but define how groups of routes inside a directory relate to each other. If a directory of routes is arranged as a stack or tabs, the layout route is where you would define that relationship by using a stack navigator or tab navigator component.

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

¥Layout routes are rendered before the actual page routes inside their directory. This means that the _layout.tsx directly inside the app directory is rendered before anything else in the app, and is where you would put the initialization code that may have previously gone inside an App.jsx file.

加号

¥Plus sign

以 + 开头的路由对 Expo Router 具有特殊意义，并用于特定用途。+not-found 就是一个例子，它会捕获任何与应用中的路由不匹配的请求。+html 用于自定义你的应用在 Web 上使用的 HTML 样板。+native-intent 用于处理应用中与特定路由不匹配的深层链接，例如由第三方服务生成的链接。

¥Routes starting with a + have special significance to Expo Router, and are used for specific purposes. One example is +not-found, which catches any requests that don't match a route in your app. +html is used to customize the HTML boilerplate used by your app on web. +native-intent is used to handle deep links into your app that don't match a specific route, such as links generated by third party services.

路由应用的符号

¥Route notation applied

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

¥Consider the following project file structure to identify the different types of routes represented:

• app/about.tsx 是一个与 /about 匹配的静态路由。

  ¥app/about.tsx is a static route that matches /about.

• app/users/[userId].tsx 是一个与 /users/123、/users/456 等匹配的动态路由。

  ¥app/users/[userId].tsx is a dynamic route that matches /users/123, /users/456, and so on.

• app/(tabs) 是一个路由组。它不会计入 URL，因此 /feed 将匹配 app/(tabs)/feed.tsx。

  ¥app/(tabs) is a route group. It will not factor into the URL, so /feed will match app/(tabs)/feed.tsx.

• app/(tabs)/index.tsx 是 (tabs) 目录的默认路由，因此它将是最初获得焦点的标签页，并匹配 / URL。

  ¥app/(tabs)/index.tsx is the default route for the (tabs) directory, so it will be the initially-focused tab, and will match the / URL.

• app/(tabs)/_layout.tsx 是一个布局文件，定义了 app/(tabs)/ 目录下的三个页面之间的关系。如果你在此文件中使用选项卡导航器组件，则这些屏幕将以选项卡形式排列。

  ¥app/(tabs)/_layout.tsx is a layout file defining how the three pages inside app/(tabs)/ relate to each other. If you use a tab navigator component inside of this file, then those screens will be arranged as tabs.

• app/_layout.tsx 是根布局文件，在应用中的任何其他路由之前渲染。

  ¥app/_layout.tsx is the root layout file, and is rendered before any other route in the app.

• +not-found.tsx 是一个特殊路由，如果用户导航到应用中不存在的路由，则会显示该路由。

  ¥+not-found.tsx is a special route that will be displayed if the user navigates to a route that doesn't exist in your app.