react-router

React Router

该技能基于 React Router v7.13.0，生成于 2026-01-31。

React Router 是 React 的多策略路由器，架起了从 React 18 到 React 19 的桥梁。你可以将其最大限度地作为 React 框架使用，也可以按需最小化使用。它支持三种模式：声明式（基础路由）、数据（带 loader/action）和框架（具备类型安全和代码分割的完整功能）。

核心参考

主题	描述	参考
模式	三种使用模式：框架、数据和声明式——选择合适的方法	core-modes
路由	路由配置、路径模式、嵌套路由、布局路由和路由匹配	core-routing
导航	导航组件和 Hook：Link、NavLink、Form、useNavigate、redirect	core-navigation
数据加载	在路由模块中使用 loader 和 clientLoader 加载数据	core-data-loading
Action	在路由模块中使用 action 和 clientAction 进行数据变更	core-actions
路由模块	路由模块 API：component、loader、action、错误边界、headers、meta 等	core-route-module
Hook	必备的 React Router Hook：useNavigation、useLocation、useParams、useMatches 等	core-hooks

功能

数据管理

主题	描述	参考
Fetcher	使用 fetcher 在不进行导航的情况下进行并发数据交互	features-fetchers
错误处理	错误边界、错误处理和错误响应	features-error-handling
中间件	用于身份验证、日志记录和请求处理的中间件	features-middleware

表单和用户输入

主题	描述	参考
表单验证	表单验证模式、错误处理和用户反馈	features-form-validation
文件上传	使用 multipart 表单数据和文件存储处理文件上传	features-file-uploads
搜索参数	使用 useSearchParams Hook 处理 URL 搜索参数	features-search-params

导航和用户体验

主题	描述	参考
视图过渡	使用 View Transitions API 实现流畅的页面过渡	features-view-transitions
导航阻止	使用 useBlocker 阻止导航以保护未保存的表单数据	features-navigation-blocking

最佳实践

主题	描述	参考
类型安全	使用 Route 类型、自动类型推断和类型生成实现类型安全	best-practices-type-safety

高级

主题	描述	参考
流式传输	使用 Suspense 进行流式传输、延迟非关键数据以及 React Suspense 集成	advanced-streaming
预渲染	在构建时预渲染静态页面以加快页面加载速度	advanced-pre-rendering
SPA 模式	禁用 SSR 并使用客户端路由的单页应用模式	advanced-spa-mode

关键建议

• 选择正确的模式：新项目使用 Framework 模式，需要控制打包时使用 Data 模式，简单路由使用声明式模式
• 在 Framework 模式中使用 Route Module API，以获得自动代码分割和类型安全
• 让 loader 返回 promise，以配合 Suspense 实现流式加载
• 使用 fetcher 处理非导航式表单提交和并发数据加载
• 在路由模块中导出 ErrorBoundary，以优雅地捕获错误
• 使用中间件处理认证和日志等横切关注点
• 利用 Framework 模式中的类型安全，配合生成的 Route 类型
• 优先使用声明式导航（Link、NavLink、Form），而非命令式导航（useNavigate）