Expo Router 符号

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

当你查看典型的 Expo Router 项目中的 app 目录时，你会看到的不仅仅是一些简单的文件和目录名称。括号和方括号是什么意思？让我们来了解基于文件的路由表示法的意义，以及它如何让你定义复杂的导航模式。

🌐 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 的文件，其 URL 将是 /feed/favorites。

🌐 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，即使它不直接位于 app 目录中。

🌐 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

就像在网页上一样，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 文件是特殊文件，它们本身不是页面，但用于定义目录内的一组路由如何相互关联。如果一个路由目录被安排为堆栈或选项卡形式，布局路由就是你通过使用堆栈导航器或选项卡导航器组件来定义这种关系的地方。

布局路由会在其目录内的实际页面路由之前渲染。这意味着位于 app 目录下的 _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 有特殊意义，并用于特定目的。以下是一些例子：

🌐 Routes that include a + have special significance to Expo Router, and are used for specific purposes. A few examples:

• +not-found，用于捕获应用中不匹配任何路由的请求。
• +html 用于自定义应用在网页上使用的 HTML 样板代码。
• +native-intent 用于处理指向应用的深度链接，这些链接不匹配特定的路由，例如由第三方服务生成的链接。
• +middleware 用于在路由呈现之前运行代码，允许你为每个请求执行诸如身份验证或重定向等任务。

路由应用的符号

🌐 Route notation applied

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

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

• 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 是一个特殊的路由，当用户导航到你应用中不存在的路由时，它会显示出来。