React Router 7.0 和 6.0 已经不是同一个框架了

 

程序饲养员

2025-05-06536阅读2分钟

 

专栏： 

ReactRouter7.5技术实战

 

React Router 7.0 相较于 6.0 版本，带来了多项重大更新和改进，特别是整合了Remix的功能使得React Router不再单单是一个前端库， 现在已经成为一个强大的全栈框架。以下是整理的RR7的主要内容：

---

📦 1. 包结构重构

• 整合核心包：react-router-dom、@remix-run/react、@remix-run/server-runtime 和 @remix-run/router 被合并为单一的 react-router 包。
• 兼容性保留：react-router-dom 仍作为 react-router 的重新导出存在，以便于迁移。
• 移除旧包：react-router-dom-v5-compat 和 react-router-native 被移除。

---

🔧 2. 移除和调整 API

• 废弃 API：移除了 json、defer、unstable_composeUploadHandlers、unstable_createMemoryUploadHandler 和 unstable_parseMultipartFormData 等 API。
• 推荐替代方案：建议使用原生 Response.json() 来替代 json 工具函数。

---

⚙️ 3. 最低版本要求提升

• Node.js：最低支持版本提升至 Node.js 20。
• React：要求使用 React 18 及以上版本。

---

🧪 4. 类型安全增强

• 自动生成类型：每个路由模块现在会生成对应的类型定义，并将类型化的 props 传递给组件。
• 访问方式：可以通过从 ./+types/<route filename without extension> 导入这些类型。

---

⚡ 5. 数据加载与表单处理改进

• 数据加载：引入了更直观的 loader 函数，用于在路由定义中处理数据加载。
• 表单处理：通过 action 函数和 <Form> 组件，实现更集成的表单提交和数据变更处理。

---

🧱 6. 错误处理机制优化

• errorElement 属性：在路由对象中新增 errorElement 属性，用于指定在数据加载、表单提交或组件渲染出错时显示的组件。
• 集成 React Error Boundaries：与 React 的错误边界机制更紧密集成，提高错误处理的灵活性和一致性。

---

🧩 7. 移除未来标志（Future Flags）

• 默认行为更新：之前在 v6 中通过未来标志（如 future.v7_relativeSplatPath、future.v7_startTransition 等）引入的实验性功能，在 v7 中成为默认行为。
• 标志移除：相关的未来标志被移除，简化了配置和使用。

---

🛠️ 8. Vite 插件与预渲染支持

• 预渲染配置：在 Vite 插件中新增 prerender 配置，支持静态站点生成（SSG）场景。
• 构建输出优化：构建时会预先渲染 .html 和 .data 文件，便于在运行时通过服务器或 CDN 提供静态内容。

---

🧪 9. 类型系统和泛型改进

• 类型统一：整合了之前分散在多个包中的类型定义，如 LoaderFunction、ActionFunction 等，统一在 react-router 包中提供。
• 泛型更新：useFetcher 等 Hook 的泛型参数更新为基于函数类型（如 typeof loader），提高类型推导的准确性。

---

🧹 10. 框架模式（Framework Mode）

• 变化：React Router 7.0 引入了源自 Remix 的“框架模式”，提供基于 Vite 的编译器、服务器渲染、代码分割、HMR（热模块替换）和类型安全等功能。
• 影响：适合需要全栈功能的开发者，提供更完整的开发体验。新项目可通过模板快速启动。