在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

remix-run/react-router

菜单

RouterProvider 与 路由器

相关源文件

本文档解释了 RouterProvider 组件和 React Router 中各种路由器的用途和功能。它涵盖了路由器的创建、配置和集成到 React 应用程序中的方法，以及基于组件的方法和数据路由方法的区别。有关路由配置的信息，请参阅 Routes and Route。

概述

React Router 为您的应用程序建立路由提供了两种基本方式：

  1. 数据路由器 - 使用带 <RouterProvider> 组件的路由器对象的现代方法。
  2. 组件路由器 - 在 JSX 中直接使用路由器组件的传统方法。

来源

RouterProvider 组件

RouterProvider 组件是使用数据路由器应用程序的入口点。它接收由 createBrowserRouter、createHashRouter 或 createMemoryRouter 等函数创建的路由器实例，并根据当前位置渲染您的应用程序。

Props

属性类型描述
routerDataRouter必需。管理路由状态和导航的路由器实例。
flushSync(fn: () => unknown) => undefined可选。用于与 React DOM 进行同步更新。

组件结构

来源

内部 Context Providers

RouterProvider 设置了几个上下文提供程序，以使路由信息在您的组件树中可用。

来源

路由器创建函数

React Router 提供多种函数来根据您的环境需求创建路由器实例。

createBrowserRouter

创建一个使用 HTML5 history API 来在 Web 浏览器中提供干净 URL 的路由器。

来源

createHashRouter

创建一个使用 URL 的哈希部分来存储路由信息的路由器。适用于您无法控制服务器的环境。

来源

createMemoryRouter

创建一个将历史记录存储在内存中的路由器，适用于测试或非浏览器环境。

来源

路由器配置选项

创建路由器时，可以提供各种选项来定制其行为。

选项类型描述
basename字符串所有路由的基础 URL 路径。
futurePartial<FutureConfig>即将推出的功能的特性标志。
hydrationDataHydrationState服务器端渲染的预加载数据。
initialEntriesInitialEntry[]内存路由器的初始历史记录条目。
initialIndex数字内存路由器在历史堆栈中的起始索引。
window窗口Window 对象覆盖（用于测试）。
dataStrategyDataStrategyFunction覆盖默认数据加载策略。
patchRoutesOnNavigationPatchRoutesOnNavigationFunction用于懒路由发现的函数。

来源

组件路由器

React Router 还提供基于组件的路由器，可以直接在 JSX 中使用。这些路由器更简单，但不支持数据加载功能。

BrowserRouter

一个使用 HTML5 history API 的组件路由器。

来源

HashRouter

一个使用 URL 的哈希部分的组件路由器。

来源

MemoryRouter

一个将历史记录保存在内存中的组件路由器。

来源

带数据路由器的组件层次结构

当使用带数据路由器的 RouterProvider 时，内部组件层次结构如下：

来源

RouterProvider 中的数据流

RouterProvider 组件在导航发生时管理状态更新和转换。

来源

Hydration 和服务器端渲染

RouterProvider 组件在使用服务器端渲染时支持 hydration。

当路由正在 hydration 但需要数据获取时，您可以使用 hydrateFallbackElement 来显示加载状态。

来源

数据路由器 vs 组件路由器

React Router 中路由方式的两种方法的比较：

功能数据路由器组件路由器
实现基于对象的 API，使用 RouterProvider基于组件的 API（<BrowserRouter>）
数据加载通过 loaders 和 actions 支持。不支持
错误处理内置错误边界。手动错误处理。
代码分割（Code splitting）内置懒加载支持。需要手动设置。
服务器渲染通过 hydration 提供一流支持。有限支持
类型安全更好的 TypeScript 集成。基础 TypeScript 支持。

来源

最佳实践

  1. 为新应用程序使用数据路由器：带 RouterProvider 的数据路由器模式提供了更好的性能和更多功能。

  2. 集中路由定义：在一个地方定义所有路由，以提高可维护性。

  3. 利用 TypeScript：React Router 具有强大的 TypeScript 支持，尤其是在数据路由器模式下。

  4. 视图过渡：在浏览器支持的情况下，使用 viewTransition prop 实现路由之间的平滑过渡。

  5. 服务器端渲染：在使用 SSR 时，提供 hydration 数据，以避免客户端不必要的数据获取。

来源