核心概念

相关源文件

• .eslintignore
• .gitignore
• CHANGELOG.md
• 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/__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

本页面介绍了 React Router 的核心概念，涵盖了路由的工作方式、涉及的主要组件以及它们如何交互以实现 React 应用程序中的导航。有关特定包架构的信息，请参阅包和结构。

路由架构

React Router 的核心是几个关键组件，它们协同工作以管理您应用程序中的导航和渲染。

来源：packages/react-router/index.ts78-118 packages/react-router/lib/components.tsx175-207 packages/react-router/lib/dom/lib.tsx129-222

Router 组件

React Router 提供了两种主要的路由方式

1. 数据路由（v6.4 引入）：通过 loader 和 action 支持数据加载和修改。

   • 使用 createBrowserRouter() 等函数创建，并使用 <RouterProvider> 渲染。
   • 启用数据加载、action 和错误处理等高级功能。

2. 组件路由：传统的通过组件组合实现路由的方式。

   • 使用 <BrowserRouter>、<Routes> 和 <Route> 等组件。
   • API 更简单，但功能比数据路由少。

来源：packages/react-router/lib/components.tsx175-207 packages/react-router/lib/dom/lib.tsx175-222

路由定义

路由定义了 URL 如何映射到应用程序中的组件。可以通过两种方式定义它们：

1. 使用 JSX（组件方法）

2. 使用 JavaScript 对象（数据路由方法）

来源：packages/react-router/lib/context.ts25-65 packages/react-router/lib/components.tsx615-728

路由匹配和渲染

当用户导航到某个 URL 时，React Router 会

1. 将 URL 与已定义的路由进行匹配
2. 渲染与匹配的路由关联的组件
3. 对于嵌套路由，会在父组件中渲染子组件

来源：packages/react-router/lib/components.tsx425-620 packages/react-router/lib/hooks.tsx425-620

Outlet 组件

Outlet 组件是一个占位符，用于渲染匹配的子路由。

来源：packages/react-router/lib/hooks.tsx311-329 packages/react-router/lib/components.tsx623-659

导航

React Router 提供了几种在路由之间导航的方法。

来源：packages/react-router/lib/hooks.tsx72-302 packages/react-router/lib/components.tsx560-621 packages/react-router/lib/dom/lib.tsx432-609

链接组件

Link 组件创建一个 <a> 标签，可在不重新加载整个页面的情况下导航。

点击时，它会

1. 阻止默认的浏览器导航
2. 更新 URL
3. 渲染匹配的路由

来源：packages/react-router/lib/dom/lib.tsx432-609 docs/api/components/Link.md1-179

程序化导航

useNavigate hook 提供程序化导航。

来源：packages/react-router/lib/hooks.tsx226-302

URL 参数

路由中的动态段可以捕获 URL 中的值。

来源：packages/react-router/lib/hooks.tsx347-355

Location 和 History

React Router 构建在浏览器的 History API 之上以管理导航。

useLocation hook 提供对当前位置的访问。

来源：packages/react-router/lib/hooks.tsx133-142 packages/react-router/lib/components.tsx227-395

数据路由和数据流

数据路由（v6.4 引入）增加了对数据加载和修改的支持。

来源：packages/react-router/__tests__/data-memory-router-test.tsx536-623

加载器

Loader 在路由渲染之前获取数据。

来源：packages/react-router/__tests__/data-memory-router-test.tsx536-623

操作

Action 处理表单提交。

来源： packages/react-router/__tests__/data-memory-router-test.tsx626-689

错误处理

React Router 提供了一个内置的错误处理机制

来源： packages/react-router/lib/hooks.tsx622-661 packages/react-router/lib/hooks.tsx679-750

导航状态

useNavigation 钩子提供了有关当前导航状态的信息

来源： packages/react-router/__tests__/data-memory-router-test.tsx547-603

结论

React Router 的核心概念围绕着

1. 路由器：各种环境的不同实现
2. 路由：将 URL 映射到组件
3. 导航：使用链接或程序化导航在路由之间切换
4. 参数：从 URL 中捕获动态片段
5. 嵌套路由：创建组件层次结构
6. 数据流：使用加载器和操作加载和修改数据
7. 错误处理：管理路由和数据加载过程中的错误

理解这些概念为在 React 应用程序中实现有效的路由奠定了基础。

来源： packages/react-router/index.ts1-367 README.md1-29