React Router v7正式发布：开启全栈框架新时代

概述

2024年11月22日，React Router团队宣布React Router v7正式发布。这一重大版本不仅将Remix的大量特性整合到了React Router中，还为React Router用户开启了全新的“框架模式”，使得开发者可以直接使用Remix的功能。这标志着React Router从一个路由库进化为一个现代化的全栈框架。

Remix核心特性

Remix是一个由React Router团队开发的全栈Web框架，它的核心特性如下：

1. 速度和用户体验：Remix追求速度和用户体验，支持服务端渲染（SSR）和静态站点生成（SSG）。
2. 跨环境运行：基于Web基础技术，Remix可以在多种环境中运行，包括Web Browser、Cloudflare Workers、Serverless或Node.js等。
3. 嵌套路由：Remix内建了文件即路由、动态路由、嵌套路由、资源路由等，使得路由管理更加灵活。
4. 预加载和并行数据获取：Remix支持预加载页面资源，几乎可以立即加载页面，同时告别了瀑布式的数据获取方式，数据在服务端并行获取，生成完整的HTML文档。
5. 自动代码拆分：Remix使用自动代码拆分来提高应用程序的性能，只加载当前页面所需的代码。
6. 静态导出和部署：Remix支持静态导出，可以将应用程序导出为静态HTML文件，并部署到各种静态主机或CDN上，提供更快的加载速度和更好的缓存性能。
7. 错误处理：Remix内置了错误处理机制，包括针对非预期错误处理的CatchBoundary和开发者抛出错误处理的ErrorBoundary。

升级指南

React Router v6用户升级指南

对于React Router v6用户来说，本次更新以“框架模式”的形式，将Remix的众多功能重新整合至React Router中，可以通过React Router直接使用Remix的功能。以下是详细的升级步骤：

1. 启用未来特性：在Remix v2应用中启用所有现有的未来特性。
2. 更新依赖：将“共享”API从运行时特定包（如@remix-run/node）合并到react-router中。
3. 运行代码现代化工具（codemod）：使用社区成员James Restall创建的codemod自动更新包和导入。
4. 安装新依赖：移除Remix包并添加新的React Router包。
5. 更新package.json中的脚本：更新dev、build、start和typecheck脚本。
6. 添加routes.ts文件：定义应用的路由。
7. 添加React Router配置：将vite.config.ts中的配置导出到react-router.config.ts。
8. 将React Router插件添加到vite.config：使用@react-router/dev/vite中的新reactRouter插件。
9. 启用类型安全：更新tsconfig.json以包括React Router的类型。
10. 重命名入口文件中的组件：更新entry.server.tsx和entry.client.tsx中的主组件。

Remix v2用户升级指南

对于Remix v2用户来说，本次更新带来了类型安全性的多项提升，并支持通过routes.ts实现更优化的路由配置，以及静态页面的预渲染功能。以下是详细的升级步骤：

1. 采用未来特性：在Remix v2应用中启用所有现有的未来特性。
2. 更新依赖：将“共享”API从运行时特定包合并到react-router中。
3. 运行代码现代化工具（codemod）：使用社区成员James Restall创建的codemod自动更新包和导入。
4. 安装新依赖：移除Remix包并添加新的React Router包。
5. 更新package.json中的脚本：更新dev、build、start和typecheck脚本。
6. 添加routes.ts文件：定义应用的路由。
7. 添加React Router配置：将vite.config.ts中的配置导出到react-router.config.ts。
8. 将React Router插件添加到vite.config：使用@react-router/dev/vite中的新reactRouter插件。
9. 启用类型安全：更新tsconfig.json以包括React Router的类型。
10. 重命名入口文件中的组件：更新entry.server.tsx和entry.client.tsx中的主组件。

结语

React Router v7的发布，为开发者带来了全新的开发体验。通过整合Remix的特性，React Router v7不仅提供了更强大的路由功能，还为构建全栈Web应用提供了更多的可能性。无论是React Router v6用户还是Remix v2用户，都可以根据上述升级指南，平滑地迁移到React Router v7，享受全新的开发体验。

---

原文链接：React Router v7发布公告
升级指南：React Router v6升级指南
Remix v2升级指南：Remix v2升级指南