React 的路由（React Router / RSC + 文件路由）

前言
[一、传统客户端路由：React Router DOM](#一、传统客户端路由：React Router DOM)
- [1、React Router v6+ 概览](#1、React Router v6+ 概览)
- [2、Router 核心组件](#2、Router 核心组件)
- - [（1）、<BrowserRouter>（SPA 路由核心）](#（1）、<BrowserRouter>（SPA 路由核心）)
  - [（2）、<DataRouter>（v6.4+ 的核心进化）](#（2）、<DataRouter>（v6.4+ 的核心进化）)
  - （3）、<MemoryRouter>
  - （4）、<HashRouter>
  - （5）、<StaticRouter>
- [3、Route 声明 API](#3、Route 声明 API)
- - [（1）、<Routes> / <Route>](#（1）、<Routes> / <Route>)
  - [（2）、lazy（懒加载）（v7 新特性）](#（2）、lazy（懒加载）（v7 新特性）)
- [4、导航 API](#4、导航 API)
- - （1）、<Link>
  - （2）、<Navigate>
  - （3）、useNavigate()
  - （4）、useLocation()
  - [（5）、href()（v7 新特性）](#（5）、href()（v7 新特性）)
- [5、Data APIs（v6.4 起大统一）](#5、Data APIs（v6.4 起大统一）)
- [6、声明式 action API （表单体系：Form）](#6、声明式 action API （表单体系：Form）)
- [7、路由异步控制（loader/action/fetcher 的组合）](#7、路由异步控制（loader/action/fetcher 的组合）)
- [8、未来方向：RSC（服务器组件） + Router](#8、未来方向：RSC（服务器组件） + Router)
[二、新时代路由：RSC + 文件路由（Next.js App Router）](#二、新时代路由：RSC + 文件路由（Next.js App Router）)
- [1、文件路由（File-based Routing）](#1、文件路由（File-based Routing）)
- [2、服务器加载数据（不再需要 useEffect）](#2、服务器加载数据（不再需要 useEffect）)
- [3、Suspense + Streaming SSR（流式渲染）](#3、Suspense + Streaming SSR（流式渲染）)
三、路由学习优先级（⭐️）

前言

想看 react router 版本历险记的请戳这里：react router

React 的路由可以分为两个时代：

React Router
RSC + 文件路由

二者的对比：

维度	React Router（客户端路由）	RSC + 文件路由（Next.js App Router）
本质类型	客户端 SPA 路由	服务器优先（Server-first）路由
路由定义方式	手写 `<Routes> <Route>`	自动文件路由（目录即路由）
执行位置	在浏览器运行	路由和组件先在服务端执行
数据加载方式	useEffect / loader（在客户端）	服务器组件中直接读数据库/API
是否可边渲染边加载（Stream SSR）	❌ 不支持	✔ 支持（流式渲染 + Suspense）
首屏加载体验	白屏时间长，需要 hydration 完成	秒开页面，服务器直接返回 UI
水化成本（Hydration）	高	降到极低（RSC 不水化）
是否会下载所有 JS	✔ 必须下载组件 JS	❌ RSC 不会下载服务器组件代码
组件模式	全部是客户端组件	分为 Server Component + Client Component
数据瀑布问题	常见（useEffect）	基本消除（服务器先拿数据）
是否能直接连数据库	❌ 不能	✔ 可以（Server Component）
是否支持 Server Actions	❌ 不支持	✔ 完全支持（React 19）
SEO 能力	差，默认 SPA	最强（SSG + SSR + ISR）
生产环境优化	靠手写优化（memo/useMemo）	自动代码分割、自动缓存、多级渲染优化
适合场景	纯客户端应用、后台管理系统	内容网站、登录站点、数据密集型业务
学习曲线	低（只需前端能力）	高（需懂 server-first 思维）
是否需要 Node 环境	❌ 不需要	✔ 需要（服务器运行 RSC）
框架代表	React Router DOM	Next.js、Remix、TanStack Start
未来趋势	保持使用，但不再创新	React 官方定位为主路线（Server-first）

一、传统客户端路由：React Router DOM

截止本文发布，React Router 的最新版本是 v7，但 v7 版本只是对 v6 版本大更新之后的进一步演化。

React Router 自发版以来，有两次重大重构（了解）：

版本	是否系统重构	主要重构内容 /破坏性变更
v4	是	v4 是一个非常大的重构。从早期静态／类配置路由到组件化。它彻底改变了路由的设计：从之前 v2/v3 样式（比较静态、类配置）转为组件化、声明式路由。v4 引入 `<Route>`、嵌套路由、动态路由等，并且路由不再是静态配置文件，而是直接通过 React 组件来声明。这个改动是非常基础且破坏性的。
v6	是	v6 是又一次重大重构。API 大幅重构、路由匹配机制、导航方式等变动。主要变化包括： -- 用 `<Routes>` 替代了 v5 的 `<Switch>`。 -- `<Route>` 的定义变了：用 `element` prop 指定渲染组件，原来的 `component` / `render` / `children` 模式被移除。 -- 路径匹配、路由顺序算法变更：v6 的 `<Routes>` 会根据"最佳匹配"选择路由，而不再简单按照声明顺序。 -- 导航 API变化：`useHistory` → `useNavigate`。 -- 移除了 `exact` 属性，因为 v6 的路径匹配方式不同。 -- 对 `<Redirect>` 进行了替换，用 `<Navigate>` 代替。 -- 数据路由（loader/action）支持增强（v6 后期加入 data-router 功能）。

传统 SPA：

所有路由在浏览器里处理
第一次加载下载整个 app
跳转无刷新
数据加载在 useEffect → 体验问题（闪烁、瀑布加载）

下面会以 v6+ 为代表，深入浅出的研究下客户端路由 React Router。

1、React Router v6+ 概览

React Router v6+ 采用 3 个现代化理念：

路由即 UI（Routes as UI）
Data API：路由管理数据
纯组件化，无 class，无 render props

v5 靠顺序匹配容易出 bug，所以 v6 规范了路由的优先级：

静态路径最优先：/user/A
动态参数次之：/user/:id
通配符最低：/user/*

React Router v6+ 的主要能力：

功能	API
路由声明	`<BrowserRouter>`, `<Routes>`, `<Route>`
嵌套路由	`<Outlet>`
路由参数	`useParams()`
导航	`useNavigate()`
加载器（新）	`loader()`
动作（新）	`action()`
数据缓存（新）	`useLoaderData()`

React Router 已经在 v6 以后进行了深度提升：

更像 Remix（Server-first），但仍然属于 client-side router。

React Router v6+ 的 API 结构图级理解：

cpp 复制代码

React Router
├── Routers (结构)
│   ├── <BrowserRouter>（v6/v7）
│   ├── <HashRouter>
│   ├── <MemoryRouter>
│   ├── <DataRouter>（v6.4+）
│   ├── <StaticRouter>（v7: 更强，支持 RSC）
│
├── Route config
│   ├── <Routes>/<Route>（v6/v7）
│   ├── lazy()（v6.4 function）
│   ├── route.lazy（v7 object）
│
├── Navigation (行为)
│   ├── <Link>
│   ├── <NavLink>
│   ├── <Navigate>
│   ├── useNavigate
│   ├── useLocation
│   ├── useParams
│
├── Data APIs（v6.4+）
│   ├── loader
│   ├── action
│   ├── fetcher
│   ├── useLoaderData
│   ├── useActionData
│   ├── useFetcher
│   ├── Form
│
├── v7 新功能（重点）
│   ├── route.lazy（object API）
│   ├── href() 类型安全构建 URL
│   ├── unstable_useRoute()
│   ├── unstable_RSC...（Server Components）
│   ├── unstable_instrumentation（监控 / profiling）
│   ├── v7_startTransition 并发导航策略

2、Router 核心组件

Router 是环境；Route 是内容；Navigation 是行为。

（1）、<BrowserRouter>（SPA 路由核心）

最常用，用于传统浏览器环境（SPA）。

特点：

使用 HTML5 history API
路由由前端接管
适用于 React SPA、大部分普通项目

适用场景：

普通 SPA
CSR 项目
React Query、Redux 等集成

（2）、<DataRouter>（v6.4+ 的核心进化）

v6.4 之后引入的"数据路由模型"：

loader → 进入页面之前自动拉取数据
action → 表单行为
fetcher → 持久异步请求抽象
→ 支持声明式提交

v7 中进一步增强：

与 RSC 协同（静态路由 + server 调用）
更强的"路由自动发现"（Lazy Route Discovery）
支持 instrumentation（监控路由数据执行）

（3）、<MemoryRouter>

没有真实 URL，非常适合：

单元测试
Electron、React Native

（4）、<HashRouter>

/#/about 这种地址。

用于：

不支持 history API 的旧浏览器
GitHub Pages 静态站点

（5）、<StaticRouter>

在服务器上使用（SSR）。

v7 版本增强：

可与 React Server Components（RSC）配合
可实现文件路由（类似 Next.js / Remix）

3、Route 声明 API

（1）、<Routes> / <Route>

声明页面结构，例如：

html 复制代码

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/users/:id" element={<User />} />
</Routes>

特点：

嵌套路由（父组件提供 Layout）
匹配是"唯一匹配"（不再部分匹配）
参数解析自动完成（useParams）

（2）、lazy（懒加载）（v7 新特性）

React Router 统一理念：路由边界就是代码分割边界。

ts 复制代码

// v6 lazy（function）
lazy: () => import('./UserPage')

// v7 lazy（object）
lazy: () => ({
  Component: UserPage,
  loader,
  action
})

融合理解：

function lazy 更简单
object lazy 更专业（大型项目 → 分块更细）

4、导航 API

导航 API：

Link → 用户触发
Navigate → 被动跳转
useNavigate → 主动跳转
useLocation → 观察跳转
href → 生成安全路径

（1）、<Link>

导航的本质是状态变化，而不是超链接跳转。

html 复制代码

<Link to="/profile">Profile</Link>

特点：

不刷新页面
保留 SPA 状态
最推荐方式

（2）、<Navigate>

编程式跳转的声明式写法。

html 复制代码

<Navigate to="/login" replace />

适用于：

鉴权
重定向

（3）、useNavigate()

最常用的命令式导航方式。

cpp 复制代码

const navigate = useNavigate();
navigate('/detail');

（4）、useLocation()

读取当前 URL。

常用于：

watch 路由变化
监听查询参数

（5）、href()（v7 新特性）

v7 新增了生成 href()，用来表示：类型安全路径。

ts 复制代码

href('/users/:id', { id: 123 })

适用于：

大型应用
TS 强类型

5、Data APIs（v6.4 起大统一）

（1）、loader（进入页面前加载数据）

ts 复制代码

export async function loader({ params }) {
  return fetch(`/api/user/${params.id}`);
}

特点：

页面渲染前执行
适合数据依赖强的页面
自动缓存、自动合并请求

（2）、useLoaderData()

React 组件中取数据：

ts 复制代码

const data = useLoaderData();

（3）、action（处理表单行为）

ts 复制代码

export async function action({ request }) {
  const form = await request.formData();
  return updateUser(form);
}

特点：

用于表单提交、增删改操作
和 loader 对应：读 → 写

（4）、useActionData()

获取表单提交返回的数据。

（5）、useFetcher()（最强异步模型）

Fetcher 是 React Router 的"无视界状态机"，适用于：

不切换页面的请求
悬浮加载（hover 请求）
输入框自动建议
表格分页 reload

ts 复制代码

const fetcher = useFetcher();
fetcher.load('/users');

v7 增强：

fetcher.unstable_reset() 防止"长任务阻塞 UI"

6、声明式 action API （表单体系：Form）

React Router 认为：

表单（<Form>）是前端应用的核心入口 → 应该一等公民化。

html 复制代码

<Form method="post">
  <input name="title"/>
  <button type="submit">Save</button>
</Form>

效果：

自动触发 action
更接近 HTML 的语义化写法

7、路由异步控制（loader/action/fetcher 的组合）

这是 React Router 高于传统路由库的地方。

通过这些结构，你可以构建：

并发数据请求
串行表单行为
乐观 UI 更新
取消任务
错误边界

Router = UI + 异步 + 数据流

Router 的"路由异步控制" 和 Redux / React Query 形成"互补"关系：

功能	Router	Redux / React Query
页面数据	✔ loader	✔ query
写操作	✔ action	✔ mutation
全局状态	❌	✔
后台任务	✔ fetcher	✔ queryFn
缓存策略	基础	⭐ 非常强

8、未来方向：RSC（服务器组件） + Router

React 19 + React Router v7 结合后，引入：

Server Components（RSC）
服务器计算（action → server reference）
文件路由（framework mode）

SSR + Streaming：这是"下一代 React 应用"的标准架构（类似 Next.js，但更自由）。

二、新时代路由：RSC + 文件路由（Next.js App Router）

RSC（ React Server Components）+ 文件路由（Next.js App Router）是 2024-2025 年间最前沿、也是微软、Meta、Vercel 推动的趋势。

代表工具：

Next.js App Router（RSC 天然支持）
TanStack Start
Waku
Remix v2（已支持 RSC）

大趋势：

路由在服务器层运行，组件也是在服务器执行，然后只发送需要的 UI 结果到客户端。

这解决了：

白屏问题
首屏加载慢
水化成本过高
数据瀑布请求

RSC 时代的路由由三部分组成：

文件路由（File-based Routing）
服务器加载数据（不再需要 useEffect）
Suspense + Streaming SSR（流式渲染）

1、文件路由（File-based Routing）

cpp 复制代码

app/
  dashboard/
    page.jsx
    loading.jsx
    layout.jsx

2、服务器加载数据（不再需要 useEffect）

ts 复制代码

export default async function Page() {
  const data = await getUsers(); // 直接读数据库
  return <UI data={data} />
}

3、Suspense + Streaming SSR（流式渲染）

服务端边算边发，页面秒开。

这是大趋势，已经是 React 的默认路由模型。

三、路由学习优先级（⭐️）

学习方向	是否必须	说明
React Router v6	必须	公司项目仍大量使用
Next.js App Router + RSC	强烈建议	未来 React 的主流写法，增长最快
Remix / TanStack Router	可选	更高级，更纯粹的 server-first

你要成为优秀的 React 工程师：

必须掌握 React Router v6 + RSC 路由体系。

React 的路由（React Router / RSC + 文件路由）

目录

前言

一、传统客户端路由：React Router DOM

1、React Router v6+ 概览

2、Router 核心组件

（1）、<BrowserRouter>（SPA 路由核心）

（2）、<DataRouter>（v6.4+ 的核心进化）

（3）、<MemoryRouter>

（4）、<HashRouter>

（5）、<StaticRouter>

3、Route 声明 API

（1）、<Routes> / <Route>

（2）、lazy（懒加载）（v7 新特性）

4、导航 API

（1）、<Link>

（2）、<Navigate>

（3）、useNavigate()

（4）、useLocation()

（5）、href()（v7 新特性）

5、Data APIs（v6.4 起大统一）

（1）、loader（进入页面前加载数据）

（2）、useLoaderData()

（3）、action（处理表单行为）

（4）、useActionData()

（5）、useFetcher()（最强异步模型）

6、声明式 action API （表单体系：Form）

7、路由异步控制（loader/action/fetcher 的组合）

8、未来方向：RSC（服务器组件） + Router

二、新时代路由：RSC + 文件路由（Next.js App Router）

1、文件路由（File-based Routing）

2、服务器加载数据（不再需要 useEffect）

3、Suspense + Streaming SSR（流式渲染）

三、路由学习优先级（⭐️）