当前位置: 首页 > news >正文

React Router 5 vs 6:使用上的主要差异与升级指南

React Router 5 的一些API 在 React Router 6 上有时可能找不到,可能会看到如下画面:export ‘useHistory’ was not found in ‘react-router-dom’ …
在这里插入图片描述
React Router目前有两个大的版本,即React Router 5、6。React Router 6 在设计上更加简单易用,引入了更直观的 API,同时也弃用了一些不太常用的功能。对于已有的 React Router 5 项目,升级到 React Router 6 会带来一些改动。

通过分析、对比 React Router 5 和 6 之间的使用差异,可以帮助开发者快速掌React Router 5 和 6 的不同地方、差异。对于有 React Router 5 项目经验的开发者来说,理解这些差异有助于更好地过渡到 React Router 6。更好地管理现有项目的升级,提高开发效率和代码质量,并跟上社区的发展趋势。

在这里插入图片描述

接下来通过示例代码详细比较一下 React Router 5 和 6 在使用上的主要区别:

  1. 路由匹配:
    • React Router 5 使用 path-to-regexp 作为路径匹配引擎,支持动态路由和正则表达式。
    • React Router 6 引入了一种更简单、更直观的匹配机制,默认使用 Matching Patterns。这种模式更易于理解和使用,不再需要处理复杂的正则表达式。

例子:

// React Router 5
<Route path="/users/:id" component={UserDetails} />// React Router 6
<Route path="/users/:userId" element={<UserDetails />} />
  1. 嵌套路由:
    • React Router 5 使用 <Switch> 组件来处理路由匹配,只渲染第一个匹配的组件。
    • React Router 6 摒弃了 <Switch>,改用 <Routes> 组件。<Routes> 会渲染所有匹配的组件,更加灵活。

例子:

// React Router 5
<Switch><Route path="/users/:id" component={UserDetails} /><Route path="/users" component={UserList} />
</Switch>// React Router 6
<Routes><Route path="/users/:userId" element={<UserDetails />} /><Route path="/users" element={<UserList />} />
</Routes>
  1. 编程式导航:
    • React Router 5 使用 withRouter 高阶组件或 this.props.history 来实现编程式导航。
    • React Router 6 弃用了 withRouter,改用 useNavigate hook 来实现编程式导航。

例子:

// React Router 5
import { withRouter } from 'react-router-dom';const MyComponent = withRouter(({ history }) => {const handleClick = () => {history.push('/users/123');};return <button onClick={handleClick}>Go to User Details</button>;
});// React Router 6
import { useNavigate } from 'react-router-dom';const MyComponent = () => {const navigate = useNavigate();const handleClick = () => {navigate('/users/123');};return <button onClick={handleClick}>Go to User Details</button>;
};
  1. 参数获取:
    • React Router 5 使用 match.params 获取路由参数。
    • React Router 6 使用 useParams hook 获取路由参数。

例子:

// React Router 5
const UserDetails = ({ match }) => {const { id } = match.params;// ...
};// React Router 6
const UserDetails = () => {const { userId } = useParams();// ...
};
  1. Link 和 NavLink
    • React Router 5 中,<Link> 组件用于构建链接,<NavLink> 组件用于构建导航链接,可以设置 activeClassNameactiveStyle 属性。
    • React Router 6 中,<Link> 组件既可以用于构建链接,也可以用于构建导航链接。可以设置 classNamestyle 属性来指定激活状态下的样式。
// React Router 5
<NavLink to="/home" activeClassName="active">Home
</NavLink>// React Router 6
<Link to="/home" className={({ isActive }) => (isActive ? 'active' : '')}>Home
</Link>
  1. Redirect 组件
    • React Router 5 中使用 <Redirect> 组件进行重定向。
    • React Router 6 中使用 <Navigate> 组件进行重定向。
// React Router 5
<Redirect from="/old-path" to="/new-path" />// React Router 6
<Navigate from="/old-path" to="/new-path" />
  1. 路由配置
    • React Router 5 中使用 <Route> 组件配置路由,可以嵌套 <Switch> 组件。
    • React Router 6 中使用 <Routes> 组件配置路由,不再需要 <Switch> 组件。
// React Router 5
<Route path="/users"><Switch><Route path="/users/:id" component={UserDetails} /><Route path="/users" component={UserList} /></Switch>
</Route>// React Router 6
<Routes><Route path="/users/:userId" element={<UserDetails />} /><Route path="/users" element={<UserList />} />
</Routes>
  1. 历史记录管理
    • React Router 5 中使用 history 对象管理历史记录。
    • React Router 6 中使用 useNavigate hook 管理历史记录。
// React Router 5
const handleClick = () => {props.history.push('/users/123');
};// React Router 6
const navigate = useNavigate();
const handleClick = () => {navigate('/users/123');
};

总的来说,React Router 6 在设计上更加简单易用,引入了更加直观的路由匹配机制和组件结构。同时也弃用了一些不太常用的 API,如 withRouter,转而使用更加灵活的 hook 来实现功能。对于已有的 React Router 5 项目,升级到 React Router 6 可能需要一些改动,但收益是值得的。

相关文章:

React Router 5 vs 6:使用上的主要差异与升级指南

React Router 5 的一些API 在 React Router 6 上有时可能找不到&#xff0c;可能会看到如下画面&#xff1a;export ‘useHistory’ was not found in ‘react-router-dom’ … React Router目前有两个大的版本&#xff0c;即React Router 5、6。React Router 6 在设计上更加简…...

基于LNMP部署wordpress

目录 一.环境准备 二.配置源并安装 三.配置Nginx 四.配置数据库 五.上传源码并替换 六.打开浏览器&#xff0c;输入虚拟机ip访问安装部署 七.扩展增加主题 一.环境准备 centos7虚拟机 关闭防火墙和seliunx stop firewalld #关闭防火墙 setenforce 0 …...

openGauss_5.1.0 企业版快速安装及数据库连接:单节点容器化安装

目录 &#x1f4da;第一章 官网信息&#x1f4da;第二章 安装&#x1f4d7;下载源码&#x1f4d7;下载安装包&#x1f4d7;修改版本&#x1f4d7;解压安装包&#x1f4d7;运行buildDockerImage.sh脚本&#x1f4d7;docker操作&#x1f4d5;查看docker镜像&#x1f4d5;启动dock…...

微信小程序 uniapp+vue城市公交线路查询系统dtjl3

小程序Android端运行软件 微信开发者工具/hbuiderx uni-app框架&#xff1a;使用Vue.js开发跨平台应用的前端框架&#xff0c;编写一套代码&#xff0c;可编译到Android、小程序等平台。 前端&#xff1a;HTML5,CSS3 VUE 后端&#xff1a;java(springbootssm)/python(flaskdja…...

2024年MathorCup数模竞赛B题问题一二三+部分代码分享

inputFolderPath E:\oracle\images\; outputFolderPath E:\oracle\process\; % 获取文件夹中所有图片的文件列表 imageFiles dir(fullfile(inputFolderPath, *.jpg)); % 设置colorbar范围阈值 threshold 120; % 遍历每个图片文件 for i 1:length(imageFiles) % 读…...

Ubuntu日常配置

目录 修改网络配置 xshell连不上怎么办 解析域名失败 永久修改DNS方法 临时修改DNS方法 修改网络配置 1、先ifconfig确认本机IP地址&#xff08;刚装的机子没有ifconfig&#xff0c;先apt install net-tools&#xff09; 2、22.04版本的ubuntu网络配置在netplan目录下&…...

GMSSL-通信

死磕GMSSL通信-C/C++系列(一) 最近再做国密通信的项目开发,以为国密也就简单的集成一个库就可以完事了,没想到能有这么多坑。遂写下文章,避免重复踩坑。以下国密通信的坑有以下场景 1、使用GMSSL guanzhi/GmSSL进行通信 2、使用加密套件SM2-WITH-SMS4-SM3 使用心得 ​…...

linux 磁盘分区Inode使用率达到100%,导致网站无法创建文件报错 failed:No space leftondevice(

linux 磁盘分区Inode使用率达到100%&#xff0c;导致网站无法创建文件报错 failed:No space left on device 由于这问题直接导致了&#xff0c;网站无法正常运行&#xff01; 提交工单求助阿里后&#xff0c;得到了答案&#xff01; 工程师先让我执行 df -h 和 df -i 通过分析…...

探索Python库的奇妙世界

探索Python库的奇妙世界 Python作为一种流行的编程语言&#xff0c;因其简洁的语法、强大的库支持和广泛的应用场景而备受开发者青睐。在这篇文章中&#xff0c;我们将深入探讨Python库的世界&#xff0c;了解它们如何帮助我们更高效地编写代码&#xff0c;并展示一些最有用的…...

SQL Server 存储函数(funGetId):唯一ID

系统测试时批量生成模拟数据&#xff0c;通过存储函数生成唯一ID。 根据当前时间生成唯一ID&#xff08;17位&#xff09; --自定义函数&#xff1a;根据当前时间组合成一个唯一ID字符串:yearmonthdayhourminutesecondmillisecond drop function funGetId;go--自定义函数&…...

当你的项目体积比较大?你如何做性能优化

在前端开发中&#xff0c;项目体积优化是一个重要的环节&#xff0c;它直接影响到网页的加载速度和用户体验。随着前端项目越来越复杂&#xff0c;引入的依赖也越来越多&#xff0c;如何有效地减少最终打包文件的大小&#xff0c;成为了前端工程师需要面对的挑战。以下是一些常…...

第6章:6.3.2 一张表总结正则表达式的语法 (MATLAB入门课程)

讲解视频&#xff1a;可以在bilibili搜索《MATLAB教程新手入门篇——数学建模清风主讲》。​ MATLAB教程新手入门篇&#xff08;数学建模清风主讲&#xff0c;适合零基础同学观看&#xff09;_哔哩哔哩_bilibili 本节我们用一张表来回顾和总结MATLAB正则表达式的基本语法。这个…...

VBA 实现outlook 当邮件设置category: red 即触发自动创建jira issue

1. 打开: Outlook VBA&#xff08;Visual Basic for Applications&#xff09; 方法一: 在邮件直接搜索:Visual Basic editor 方法二: File -> Options -> Customize Ribbon-> 打钩 如下图: 2.设置运行VBA 脚本: File -> Options -> Trust center -> Trus…...

办公软件巨头CCED、WPS迎来新挑战,新款办公软件已形成普及之势

办公软件巨头CCED、WPS的成长经历 CCED与WPS&#xff0c;这两者均是中国办公软件行业的佼佼者&#xff0c;为人们所熟知。 然而&#xff0c;它们的成功并非一蹴而就&#xff0c;而是经过了长时间的积累与沉淀。 CCED&#xff0c;这款中国大陆早期的文本编辑器&#xff0c;在上…...

架构设计-订单系统之订单系统的架构进化

1、单数据库架构 产品初期&#xff0c;技术团队的核心目标是&#xff1a;“快速实现产品需求&#xff0c;尽早对外提供服务”。 彼时的专车服务都连同一个 SQLServer 数据库&#xff0c;服务层已经按照业务领域做了一定程度的拆分。 这种架构非常简单&#xff0c;团队可以分开…...

性能升级,INDEMIND机器人AI Kit助力产业再蜕变

随着机器人进入到越来越多的生产生活场景中&#xff0c;作业任务和环境变得更加复杂&#xff0c;机器人需要更精准、更稳定、更智能、更灵敏的自主导航能力。 自主导航技术作为机器人技术的核心&#xff0c;虽然经过了多年发展&#xff0c;取得了长足进步&#xff0c;但在实践…...

2024年妈妈杯数学建模C题思路分析-物流网络分拣中心货量预测及人员排班

# 1 赛题 C 题 物流网络分拣中心货量预测及人员排班 电商物流网络在订单履约中由多个环节组成&#xff0c;图 ’ 是一个简化的物流 网络示意图。其中&#xff0c;分拣中心作为网络的中间环节&#xff0c;需要将包裹按照不同 流向进行分拣并发往下一个场地&#xff0c;最终使包裹…...

prometheus\skywalking\splunk功能的区别

Prometheus、SkyWalking和Splunk这三个工具在功能上各有特色&#xff0c;以下是它们各自的主要功能特点&#xff1a; Prometheus是一个开源的系统监控和警报工具。它的主要功能包括&#xff1a; 实时监控与警报&#xff1a;Prometheus可以实时监控各种指标&#xff0c;并根据…...

Harmony鸿蒙南向驱动开发-SPI接口使用

功能简介 SPI指串行外设接口&#xff08;Serial Peripheral Interface&#xff09;&#xff0c;是一种高速的&#xff0c;全双工&#xff0c;同步的通信总线。SPI是由Motorola公司开发&#xff0c;用于在主设备和从设备之间进行通信。 SPI接口定义了操作SPI设备的通用方法集合…...

芒果YOLOv7改进96:检测头篇DynamicHead动态检测头:即插即用|DynamicHead检测头,尺度感知、空间感知、任务感知

该专栏完整目录链接: 芒果YOLOv7深度改进教程 该创新点:在原始的Dynamic Head的基础上,对核心部位进行了二次的改进,在 原论文 《尺度感知、空间感知、任务感知》 的基础上,在 通道感知 的层级上进行了增强,关注每个像素点的比重。 在自己的数据集上改进,有效涨点就可以…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

代码规范和架构【立芯理论一】(2025.06.08)

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

在 Spring Boot 项目里,MYSQL中json类型字段使用

前言&#xff1a; 因为程序特殊需求导致&#xff0c;需要mysql数据库存储json类型数据&#xff0c;因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...

MFE(微前端) Module Federation:Webpack.config.js文件中每个属性的含义解释

以Module Federation 插件详为例&#xff0c;Webpack.config.js它可能的配置和含义如下&#xff1a; 前言 Module Federation 的Webpack.config.js核心配置包括&#xff1a; name filename&#xff08;定义应用标识&#xff09; remotes&#xff08;引用远程模块&#xff0…...