概述

相关源文件

• .eslintignore
• .gitignore
• CONTRIBUTING.md
• README.md
• docs/api/components/Link.md
• docs/api/components/Route.md
• docs/api/components/Routes.md
• docs/api/index.md
• examples/README.md
• package.json
• packages/react-router-dom/CHANGELOG.md
• packages/react-router-dom/package.json
• packages/react-router/CHANGELOG.md
• packages/react-router/__tests__/data-memory-router-test.tsx
• packages/react-router/index.ts
• packages/react-router/lib/components.tsx
• packages/react-router/lib/context.ts
• packages/react-router/lib/dom/lib.tsx
• packages/react-router/lib/hooks.tsx
• packages/react-router/package.json

React Router 是一个功能全面的 React 应用路由库，支持客户端和服务器端渲染的导航、URL 处理和高级数据加载功能。它既是一个轻量级库，也是一个高级框架，让开发者能够构建从简单的导航应用到复杂的数据驱动 Web 应用的任何内容。

本页面提供了 React Router 架构、核心组件和关键功能的概览。有关特定组件的更详细信息，请参阅 核心组件、数据 API 和 服务器端渲染。

架构概述

React Router 采用模块化设计，包含多个包，提供不同级别的功能。

来源: README.md17-25 package.json2-117

关键组件与数据流

React Router 围绕几个核心组件类型和数据流架构组织其功能。

来源: packages/react-router/index.ts79-142 packages/react-router/lib/components.tsx183-489 packages/react-router/lib/hooks.tsx72-142

使用模式

React Router 支持多种使用模式以适应不同的开发偏好。

模式	描述	主要 API	数据加载
库模式	传统的基于组件的方法	createBrowserRouter + RouterProvider	手动配置加载器 (loaders) 和操作 (actions)
框架模式	基于文件的路由系统	使用 @react-router/dev 的约定驱动文件结构	基于文件的加载器和操作
组件模式	声明式的组件方法	<Routes> 和 <Route>	无内置数据加载

来源: README.md10-14 packages/react-router/lib/components.tsx179-558

渲染和数据加载流程

React Router 中的渲染和数据加载流程（在数据路由模式下）遵循以下顺序：

来源: packages/react-router/lib/hooks.tsx585-620 packages/react-router/lib/components.tsx243-426

核心组件

路由器

React Router 提供几种路由器实现：

• BrowserRouter: 使用 HTML5 history API 为现代浏览器提供干净的 URL。
• HashRouter: 在较旧的浏览器或静态文件环境中使用 URL hash 进行路由。
• MemoryRouter: 将历史记录保留在内存中（适用于测试）。
• RouterProvider: 数据路由器的主要入口点。

来源: packages/react-router/lib/dom/lib.tsx175-382 packages/react-router/lib/components.tsx243-489

路由定义

路由可以使用组件或对象语法进行定义。

来源: packages/react-router/lib/components.tsx664-728 docs/api/components/Route.md docs/api/components/Routes.md

导航

React Router 提供了一些导航组件和 hook：

• Link: 主要导航组件。
• NavLink: 具有活动状态处理功能的增强型 Link。
• useNavigate: 编程式导航 hook。
• Navigate: 用于声明式导航的组件。
• Form: 通过表单进行数据修改。

来源: packages/react-router/lib/dom/lib.tsx436-548 packages/react-router/lib/hooks.tsx226-302 packages/react-router/lib/components.tsx580-621 docs/api/components/Link.md

数据加载和修改

React Router v7 引入了一个强大的数据加载系统。

功能	描述
加载器	用于加载路由数据的函数
操作	用于修改数据的函数
Fetchers	无需导航即可进行后台数据操作
useLoaderData	用于访问加载器数据的 hook。
useActionData	用于访问操作结果的 hook。
useFetcher	用于后台操作的 hook。

来源: packages/react-router/lib/hooks.tsx133-429 packages/react-router/lib/dom/lib.tsx1084-1423

服务器端渲染

React Router 支持服务器端渲染和数据预取。

• StaticRouter: 服务器端路由器组件。
• createStaticHandler: 用于处理服务器请求。
• StaticRouterProvider: 用于客户端使用服务器数据进行数据预取。
• Data Strategies: 控制数据加载和流式传输的方式。

来源: packages/react-router/index.ts190-198 packages/react-router/CHANGELOG.md61-323

平台适配

React Router 为各种服务器环境提供了专门的适配器：

• @react-router/node: Node.js 集成。
• @react-router/express: Express 服务器集成。
• @react-router/cloudflare: Cloudflare Workers 集成。
• @react-router/architect: AWS Architect 集成。
• @react-router/serve: 独立服务器。

来源: README.md17-24 package.json47-66

开发工具

为了增强开发体验，React Router 提供：

• @react-router/dev: 开发服务器和构建工具。
• @react-router/fs-routes: 基于文件系统的路由。
• create-react-router: 项目脚手架工具。

来源: README.md17-24 package.json47-66

版本演进

React Router v7 相较于之前的版本有了显著的演进，整合了多个包。

• 将 @remix-run/router 合并到 react-router 中。
• 将 DOM 功能合并到 react-router 中。
• 集成服务器运行时功能。
• 引入了“单一获取”策略的高级数据加载。
• 改进了对部分预取和惰性加载的支持。

来源： packages/react-router/CHANGELOG.md513-620 packages/react-router-dom/CHANGELOG.md101-154