This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.
Expo Router 标记法
编辑页面
了解如何使用特殊文件名和标记,在项目的文件结构中以富有表现力的方式定义应用的导航树。
当你查看一个典型的 Expo Router 项目中的 src/app 目录时,你会发现里面远不只是一些简单的文件名和目录名。括号和方括号是什么意思?让我们来了解一下基于文件的路由标记的意义,以及它如何让你定义复杂的导航模式。
路由标记的类型
简单名称/无标记
srcapphome.tsxfeedfavorites.tsx没有任何标记的普通文件名和目录名表示 静态路由。它们的 URL 与它们在文件树中的显示完全一致。比如,feed 目录中的一个名为 favorites.tsx 的文件,其 URL 将是 /feed/favorites。
方括号
srcapp[userName].tsxproducts[productId]index.tsx如果你在文件名或目录名中看到方括号,那么你看到的是一个 动态路由。路由名称包含一个参数,这个参数可在渲染页面时使用。这个参数既可以出现在目录名中,也可以出现在文件名中。例如,名为 [userName].tsx 的文件会匹配 /evanbacon、/expo 或其他用户名。然后,你可以在页面内部使用 useLocalSearchParams 钩子访问该参数,并据此加载该特定用户的数据。
括号
srcapp(home)index.tsxsettings.tsx目录名被括号包围表示一个 路由组。这些目录用于将路由分组在一起,而不影响 URL。例如,名为 src/app/(home)/settings.tsx 的文件,其 URL 将是 /settings,即使它并不直接位于 src/app 目录下。
路由组可用于简单的组织目的,但在定义路由之间更复杂的关系时,往往会变得更加重要。
index.tsx 文件
srcapp(home)index.tsxprofileindex.tsx和网页端一样,index.tsx 文件表示某个目录的默认路由。例如,名为 profile/index.tsx 的文件将匹配 /profile。名为 (home)/index.tsx 的文件将匹配 /,实际上成为整个应用的默认路由。
_layout.tsx 文件
srcapp_layout.tsx(home)_layout.tsxfeed_layout.tsx_layout.tsx 文件是特殊文件,本身不是页面,而是定义目录中各组路由之间如何相互关联。如果一个路由目录被组织成堆栈或标签页,那么布局路由就是你通过使用 stack navigator 或 tab navigator 组件来定义这种关系的地方。
布局路由会先于其目录中的实际页面路由渲染。这意味着,直接位于 src/app 目录下的 _layout.tsx 会在应用中的其他内容之前渲染,并且这里是你放置初始化代码的地方,这些代码以前可能位于 App.jsx 文件中。
加号
srcapp+not-found.tsx+html.tsx+native-intent.tsx+middleware.ts包含 + 的路由对 Expo Router 有特殊意义,并用于特定用途。以下是一些示例:
+not-found,用于捕获所有未匹配到你应用中路由的请求。+html用于自定义应用在网页端使用的 HTML 基础模板。+native-intent用于处理进入应用但未匹配到特定路由的深度链接,例如由第三方服务生成的链接。+middleware用于在路由渲染之前运行代码,使你能够对每个请求执行身份验证或重定向等任务。
某些路径名(如/assets)已被 Metro 和 Expo Router 保留。请避免将它们用于路由。完整列表请参见 Reserved paths。
路由标记的应用
考虑下面的项目文件结构,以识别所表示的不同类型路由:
srcapp(home)_layout.tsxindex.tsxfeed.tsxprofile.tsx_layout.tsxusers[userId].tsx+not-found.tsxabout.tsx- 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 是一个特殊路由,当用户导航到应用中不存在的路由时会显示它。