Expo Router 符号

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

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

🌐 When you look inside the src/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 非常有用。例如，一个名为 src/app/(home)/settings.tsx 的文件，其 URL 将为 /settings，即使它不直接位于 src/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 src/app/(home)/settings.tsx will have /settings for its URL, even though it is not directly in the src/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。一个名为 (home)/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 (home)/index.tsx will match /, effectively becoming the default route for your entire app.

_layout.tsx 文件

🌐 _layout.tsx files

_layout.tsx 文件是特殊文件，它们本身不是页面，但用于定义目录内的一组路由如何相互关联。如果一个路由目录被安排为堆栈或选项卡形式，布局路由就是你通过使用堆栈导航器或选项卡导航器组件来定义这种关系的地方。

布局路由会在其目录内的实际页面路由之前渲染。这意味着位于 src/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 src/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 用于在路由渲染之前运行代码，允许你为每个请求执行诸如身份验证或重定向等任务。

警告 一些路径名称，例如 /assets，是由 Metro 和 Expo Router 保留的。避免在路由中使用它们。完整列表请参见 保留路径。

路由应用的符号

🌐 Route notation applied

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

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

• src/app/about.tsx 是一个匹配 /about 的静态路由。
• src/app/users/[userId].tsx 是一个动态路由，匹配 /users/123、/users/456，等等。
• src/app/(home) 是一个路由组。它不会出现在 URL 中，所以 /feed 会匹配 src/app/(home)/feed.tsx。
• src/app/(home)/index.tsx 是 (home) 目录的默认路由，并将匹配 / URL。
• src/app/(home)/_layout.tsx 是一个布局文件，用于定义 src/app/(home)/ 内的页面如何相互关联。
• src/app/_layout.tsx 是根布局文件，会在应用中的任何其他路由之前渲染。
• src/app/+not-found.tsx 是一个特殊的路由，如果用户导航到在你的应用中不存在的路由时，将会显示它。