React Navigation 的老毛病
React Navigation 是 RN 生态事实标准,但它的 API 风格源于 2017 年,很多毛病一直没彻底治:
路由配置集中在代码
createNativeStackNavigator 一个文件列 40 个 screen,新人一眼懵。一个页面要新增,改导航配置 + 写组件 + 导出,至少三处。类型不安全
路由名、参数要手动维护
RootStackParamList,改个 key 能崩半个项目却不报编译错。Deep Link 手工配
linking 对象里一条条写 URL 映射,App 一大就忘更新,产品经理发来的营销链打不开。Web 支持割裂
React Navigation Web 能用但 URL 不自然,SEO、分享都别扭。想和 Next.js 一样"
/products/123"需要额外配置。文件路由的启发
Next.js App Router、Remix、SvelteKit、Nuxt——2022 起 Web 框架集体收敛到"文件即路由"。Expo 团队 2023 年把这套搬进 RN,就是 Expo Router。
传统 React Navigation Expo Router
───────────────────── ────────────────
src/ app/
├─ App.tsx ├─ _layout.tsx ← Root
│ <NavigationContainer> ├─ index.tsx ← /
│ <Stack.Navigator> ├─ settings.tsx ← /settings
│ <Stack.Screen ├─ (tabs)/
│ name="Home" │ ├─ _layout.tsx ← Tabs
│ component={Home}/> │ ├─ home.tsx ← /home
│ ...40 行... │ └─ profile.tsx ← /profile
└─ screens/ └─ products/
├─ Home.tsx └─ [id].tsx ← /products/:id
└─ Products.tsx
Expo Router 解决的问题
| 痛点 | React Navigation | Expo Router v4 |
|---|---|---|
| 路由配置 | 代码集中 | 文件系统 |
| URL ↔ 屏幕映射 | 手写 linking | 自动派生 |
| 类型安全 | 手写 ParamList | Typed Routes 自动生成 |
| Web 三端 | 支持但别扭 | 一等公民 |
| SEO / 分享 | — | 基于真实 URL |
| 代码分割 | 手写 lazy | 自动懒加载 |
| 底层 | React Navigation | React Navigation(包了一层) |
不是替代,是包装
Expo Router 底层仍然是 React Navigation,所有 Screen options、手势、transition 都能原样用。你可以把它理解为"给 React Navigation 加了 Next.js 的开发体验",不是推翻重做。
Expo Router 底层仍然是 React Navigation,所有 Screen options、手势、transition 都能原样用。你可以把它理解为"给 React Navigation 加了 Next.js 的开发体验",不是推翻重做。
Expo Router v4 新东西
SDK 52 对应 Expo Router v4,相较 v3 的亮点:
React 19 兼容
配合 New Architecture(Fabric + TurboModules)默认开启,性能提升 20-30%。
Typed Routes GA
app.json 开一行 experiments.typedRoutes: true,href / router.push 全链路类型安全。Server Functions(beta)
页面里写
"use server",可以直接调后端,接口无需手写——这是 Web 世界的概念终于进 RN。Modals 与 Sheet
原生模态、iOS Form Sheet、半高弹窗都能用路由表达,不再手动管 visible state。
Web Static Output
一条
npx expo export -p web 产出静态站,直接扔 Vercel/CF Pages。什么时候该用
推荐场景
- 新启 RN 项目,没历史包袱
- 需要 iOS + Android + Web 三端共用
- Deep Link / Universal Links 是核心功能
- 团队熟悉 Next.js / Remix,心智可复用
- 希望 TypeScript 路由类型安全
什么时候别用
- 项目完全不用 Expo(纯 RN CLI 且大量 native 定制)——可用但要自己搭桥,成本高
- 导航极度自定义(比如已经基于 react-native-screens 写过底层)——Expo Router 的封装可能限制你
- 现有 App 已用 React Navigation 且体积巨大——迁移 ROI 要评估
和 React Native Navigation(wix)对比
- RNN:纯原生导航(UINavigationController / FragmentManager),性能极致但 JS 端心智负担重,几乎没人做 Web 三端
- Expo Router:JS 端抽象,底层仍然借助 react-native-screens 调用原生,性能足够,DX 遥遥领先
生态状态(2026 年初)
- Expo 全家桶 SDK 52 稳定版
- GitHub:
expo/expo(路由代码在packages/expo-router),38k+ star - 生产用户:Tesla App、Terminal(Bloomberg)、Shopify Shop、NerdWallet、众多 YC 初创
- Expo 的商业产品 EAS(Build/Update/Submit)是事实标准的 RN 云端流水线
本章小结
- React Navigation 稳但老:配置集中、类型不严、Web/SEO 弱
- Expo Router 把 Next.js 的文件路由搬进 RN,底层仍是 React Navigation
- v4(SDK 52)亮点:Typed Routes GA、Server Functions、原生 Modal、Web 静态导出
- 适合新项目、多端、深链重度 App;旧项目按 ROI 评估
- RN 导航生态短期不会再起战争,Expo Router 是事实标准