Expo Router 介绍

编辑

Expo Router 是一个用于使用 Expo 构建的通用 React Native 应用程序的开源路由库。


Expo Router 是一个基于文件的 React Native 和 Web 应用程序路由器。它使您能够管理应用程序中屏幕之间的导航,允许用户在应用程序的 UI 不同部分之间无缝移动,使用相同的组件在多个平台上(Android、iOS 和 Web)运行。

它将网络中的最佳文件系统路由概念带入通用应用程序 — 使您的路由可以跨越每个平台工作。当将文件添加到 app 目录时,该文件会自动成为导航中的一个路由。

Expo Router 参考

有关 API 组件、钩子、方法等的信息,请参见 Expo Router 参考。

您还可以查看以下播放列表以开始使用 Expo Router:

Expo Router 播放列表

从核心概念到更复杂的导航流程的 Expo Router 教程系列。

功能

  • 原生: 基于我们强大的 React Navigation 套件 构建,Expo Router 导航在默认情况下是真正的原生和平台优化。
  • 可共享: 您应用程序中的每个屏幕自动可深链接。使您应用程序中的任何路由都可以通过链接共享。
  • 离线优先: 应用程序被缓存并优先运行离线,在发布新版本时自动更新。处理所有传入的原生 URL,无需网络连接或服务器。
  • 优化: 路由在生产中通过懒加载自动优化,在开发中则延迟打包。
  • 迭代: 在 Android、iOS 和 Web 之间实现通用快速刷新,以及在打包器中实现工件记忆,以保持快速规模。
  • 通用: Android、iOS 和 Web 共享统一的导航结构,能够在路由级别下放到特定平台的 API。
  • 可发现: Expo Router 使 Web 上的构建时静态渲染和对原生的统一链接成为可能。这意味着您的应用内容可以被搜索引擎索引。

使用不同的导航库

您可以在您的 Expo 项目中使用任何其他导航库,例如 React Navigation。然而,如果您正在构建一个新应用程序,我们建议您使用 Expo Router 以获得上述所有功能。使用其他导航库,您可能需要为这些功能中的某些功能实施自己的策略,例如可共享链接或在同一项目中处理 Web 和原生导航。

如果您想使用 Wix 的 React Native Navigation,它在 Expo Go 中不可用,并且尚未与 expo-dev-client 兼容。我们建议使用 React Navigation 的 createNativeStackNavigator 来使用 Android 和 iOS 原生导航 API。

常见问题

Expo Router 与 Expo 与 React Native CLI 的对比

历史上,React Native 并没有对应用程序的构建方式提供规范,这类似于在没有现代 Web 框架的情况下使用 React。Expo Router 是一个具有主张的 React Native 框架,类似于 Remix 和 Next.js 是仅限 Web 的 React 的主张框架。

Expo Router 的设计旨在为每个人带来最佳的架构模式,确保 React Native 被充分利用。例如,Expo Router 的 Async Routes 功能使每个人都能实现懒加载打包。之前,懒加载打包仅在 Meta 用于构建 Facebook 应用。

我可以在现有的 React Native 应用中使用 Expo Router 吗?

是的,Expo Router 是用于通用 React Native 应用的框架。由于路由器与打包器之间的深层连接,Expo Router 仅在使用 Metro 的 Expo CLI 项目中可用。幸运的是,您也可以 在任何 React Native 项目中使用 Expo CLI

基于文件的路由有什么好处?
  • 文件系统是一个众所周知且易于理解的概念。更简单的认知模型使得教育新团队成员和扩展应用程序变得更容易。
  • 最快的方式使新用户入门是让他们打开一个通用链接,该链接根据他们是否安装了该应用或网站打开到正确的屏幕。这个技术如此先进,以至于通常只有大型公司才能承担创建和维护平台之间的相似性。但有了 Expo 的基于文件的路由,您可以开箱即用这一功能!
  • 代码重构变得更容易,因为您可以移动文件而无需更新任何导入或路由组件。
  • Expo Router 能够自动静态类型化路由。这确保您只能链接到有效的路由,而不能链接到不存在的路由。类型化路由还改善了重构,因为如果链接被破坏,您将得到类型错误。
  • Async Routes(打包分割)提高了开发速度,尤其是在较大的项目中。由于错误被隔离到单一路由,这也使得升级变得更容易,意味着您可以逐页逐步更新或重构应用,而不是一次性全部更新(传统的 React Native)。
  • 深链接始终有效,适用于每个页面。这使得能够共享应用中任何内容的链接,对于推广您的应用、收集错误报告、E2E 测试、自动截图等非常有用。
  • Expo Head 使用自动链接启用深层原生集成。像快速笔记、接力、Siri 上下文和通用链接这样功能只需配置设置,无需代码更改。这实现了与用户拥有的整套智能设备生态系统的完美垂直整合,从而导致只有通用应用(web ⇄ native)才能提供的用户体验。
  • Expo Router 具备在 Web 上自动静态渲染每一页的能力,使得真实 SEO 和您应用内容的完全可发现成为可能。这仅因为基于文件的约定才得以实现。
  • Expo CLI 在遵循已知约定时能够推测出有关您应用的很多信息。例如,我们可以实现每条路由的自动打包分割,或自动为您的网站生成一个网站地图。当您的应用只有一个入口点时,这是不可能的。
  • 像通知和主屏幕小部件等重新参与功能更容易集成,因为您可以简单地拦截启动和深链接,带查询参数,随处在应用中实现。
  • 就像在 Web 上,分析和错误报告可以很容易配置为自动包含路由名称,这对调试和理解用户行为非常有用。
我为什么应该使用 Expo Router 而不是 React Navigation?

Expo Router 和 React Navigation 都是 Expo 团队的库。我们在 React Navigation 的基础上构建了 Expo Router,以便利用基于文件的路由的好处。Expo Router 是 React Navigation 的超集,这意味着您可以与 Expo Router 一起使用任何 React Navigation 组件和 API。

如果基于文件的路由不适合您的项目,您可以使用 React Navigation 手动设置路由、类型和链接。

我如何对我的 Expo Router 网站进行服务器渲染?

Expo Router 支持基本的静态渲染(SSG)。服务器端渲染当前需要定制基础设施来设置。

下一步

快速开始

了解如何快速开始使用 Expo Router。

手动安装

详细说明如何开始并将 Expo Router 添加到现有应用程序。

路由器 101

有关核心概念、符号模式、导航布局和常见导航模式的信息,请从路由器 101 部分开始。

示例应用

查看 GitHub 上示例应用的源代码。