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

news/2024/11/29 17:57:20/

概述

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中的脚本:更新devbuildstarttypecheck脚本。
  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.tsxentry.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中的脚本:更新devbuildstarttypecheck脚本。
  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.tsxentry.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升级指南


http://www.ppmy.cn/news/1550955.html

相关文章

设计有一个 “分布式软总线“ 系统,跨平台

设计一个 跨平台的分布式软总线 系统是为了实现不同设备间的通信,支持各种硬件平台和操作系统,且能够通过统一的协议进行互联互通。这样的系统通常用于物联网(IoT)场景、智能家居、智能制造、车联网等应用。以下是一个详细的设计方…

Spring Cloud Stream实现数据流处理

1.什么是Spring Cloud Stream? Spring Cloud Stream的核心是Stream,准确来讲Spring Cloud Stream提供了一整套数据流走向(流向)的API, 它的最终目的是使我们不关心数据的流入和写出,而只关心对数据的业务处…

Linux快速入门:3.硬盘分区与RHEL8系统安装

点击蓝字 | 关注我们 规划Linux的硬盘分区 在安装RHEL8前,我们先根据上节的内容Linux快速入门:2.Linux的文件系统和目录结构,对硬盘进行分区规划。 对于Linux初学者,在学习过程中建议分区方案越简单越好,只需要将硬盘分…

Vim操作指南

Vim 是一款功能强大的文本编辑器,它广泛应用于程序员、系统管理员和普通用户的日常工作中。Vim 以其高效、灵活和可扩展性著称,虽然上手有一定难度,但掌握后可以极大提高编辑效率。本指南旨在为用户提供一个详细的 Vim 操作教程,从…

人工智能技术的工程伦理问题 --以美团外卖大数据杀熟为例

引言 最近朋友圈刷屏的一篇文章《我被美团会员割了韭菜》很多人都看过,针对该事件,网经社电子商务研究中心主任曹磊指出:大数据“杀熟”暴露出大数据产业发展过程中的非对称以及不透明。由此也带来的最大伦理危机—个人隐私权问题。 背景信…

深度学习:完整的模型训练流程

深度学习:完整的模型训练流程 为了确保我们提供一个彻底和清晰的指导,让我们深入分析在model.py和train.py文件中定义的模型训练和验证流程。以下部分将详细讨论模型结构的定义、数据的加载与预处理、训练参数的配置、训练与测试循环,以及模…

如何通过PHP爬虫模拟表单提交,抓取隐藏数据

引言 在网络爬虫技术中,模拟表单提交是一项常见的任务,特别是对于需要动态请求才能获取的隐藏数据。在电商双十一、双十二等促销活动期间,商品信息的实时获取尤为重要,特别是针对不断变化的价格和库存动态。为了满足这种需求&…

泷羽sec-蓝队基础之网络七层杀伤链(上) 学习笔记

声明! 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下,如涉及侵权马上删除文章,笔记只是方便各位师傅的学习和探讨,文章所提到的网站以及内容,只做学习交流,其他均与本人以及泷羽sec团队无关&a…