概述
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升级指南