概述
2024年11月22日，React Router团队宣布React Router v7正式发布。这一重大版本不仅将Remix的大量特性整合到了React Router中，还为React Router用户开启了全新的“框架模式”，使得开发者可以直接使用Remix的功能。这标志着React Router从一个路由库进化为一个现代化的全栈框架。
Remix核心特性
Remix是一个由React Router团队开发的全栈Web框架，它的核心特性如下：
- 速度和用户体验：Remix追求速度和用户体验，支持服务端渲染（SSR）和静态站点生成（SSG）。
- 跨环境运行：基于Web基础技术，Remix可以在多种环境中运行，包括Web Browser、Cloudflare Workers、Serverless或Node.js等。
- 嵌套路由：Remix内建了文件即路由、动态路由、嵌套路由、资源路由等，使得路由管理更加灵活。
- 预加载和并行数据获取：Remix支持预加载页面资源，几乎可以立即加载页面，同时告别了瀑布式的数据获取方式，数据在服务端并行获取，生成完整的HTML文档。
- 自动代码拆分：Remix使用自动代码拆分来提高应用程序的性能，只加载当前页面所需的代码。
- 静态导出和部署：Remix支持静态导出，可以将应用程序导出为静态HTML文件，并部署到各种静态主机或CDN上，提供更快的加载速度和更好的缓存性能。
- 错误处理：Remix内置了错误处理机制，包括针对非预期错误处理的
CatchBoundary和开发者抛出错误处理的ErrorBoundary。
升级指南
React Router v6用户升级指南
对于React Router v6用户来说，本次更新以“框架模式”的形式，将Remix的众多功能重新整合至React Router中，可以通过React Router直接使用Remix的功能。以下是详细的升级步骤：
- 启用未来特性：在Remix v2应用中启用所有现有的未来特性。
- 更新依赖：将“共享”API从运行时特定包（如
@remix-run/node）合并到react-router中。 - 运行代码现代化工具（codemod）：使用社区成员James Restall创建的codemod自动更新包和导入。
- 安装新依赖：移除Remix包并添加新的React Router包。
- 更新
package.json中的脚本：更新dev、build、start和typecheck脚本。 - 添加
routes.ts文件：定义应用的路由。 - 添加React Router配置：将
vite.config.ts中的配置导出到react-router.config.ts。 - 将React Router插件添加到
vite.config：使用@react-router/dev/vite中的新reactRouter插件。 - 启用类型安全：更新
tsconfig.json以包括React Router的类型。 - 重命名入口文件中的组件：更新
entry.server.tsx和entry.client.tsx中的主组件。
Remix v2用户升级指南
对于Remix v2用户来说，本次更新带来了类型安全性的多项提升，并支持通过routes.ts实现更优化的路由配置，以及静态页面的预渲染功能。以下是详细的升级步骤：
- 采用未来特性：在Remix v2应用中启用所有现有的未来特性。
- 更新依赖：将“共享”API从运行时特定包合并到
react-router中。 - 运行代码现代化工具（codemod）：使用社区成员James Restall创建的codemod自动更新包和导入。
- 安装新依赖：移除Remix包并添加新的React Router包。
- 更新
package.json中的脚本：更新dev、build、start和typecheck脚本。 - 添加
routes.ts文件：定义应用的路由。 - 添加React Router配置：将
vite.config.ts中的配置导出到react-router.config.ts。 - 将React Router插件添加到
vite.config：使用@react-router/dev/vite中的新reactRouter插件。 - 启用类型安全：更新
tsconfig.json以包括React Router的类型。 - 重命名入口文件中的组件：更新
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升级指南