ReactRouter v6升级的步骤
React Router v6 引入了一个 Routes 组件,它有点像 Switch ,但功能要强大得多。与 Switch 相比, Routes 的主要优势在于:
<Routes>中的所有<Route>和<Link>都是相对的。这导致在<Route path>和<Link to>中的代码更精简和更可预测。- 路由的选择基于最佳匹配,而不是按顺序遍历。这避免了由于在
<Switch>中定义较晚而导致无法到达的错误。 - 路由可以嵌套在一个地方,而不是分散在不同的组件中。在中小型应用程序中,这样可以方便地一次性查看所有路由。在大型应用程序中,您仍然可以通过
React.lazy动态加载将路由嵌套在打包中。
v6,您需要将所有 <Switch> 元素转换为 <Routes> 。
首先,让我们来谈谈 v6 中的相对路由和链接。
v5 是这样写:
// This is a React Router v5 app
import {BrowserRouter,Switch,Route,Link,useRouteMatch,
} from "react-router-dom";function App() {return (<BrowserRouter><Switch><Route exact path="/"><Home /></Route><Route path="/users"><Users /></Route></Switch></BrowserRouter>);
}function Users() {// In v5, nested routes are rendered by the child component, so// you have <Switch> elements all over your app for nested UI.// You build nested routes and links using match.url and match.path.let match = useRouteMatch();return (<div><nav><Link to={`${match.url}/me`}>My Profile</Link></nav><Switch><Route path={`${match.path}/me`}><OwnUserProfile /></Route><Route path={`${match.path}/:id`}><UserProfile /></Route></Switch></div>);
}
v6需要这个样子:
// This is a React Router v6 app
import {BrowserRouter,Routes,Route,Link,
} from "react-router-dom";function App() {return (<BrowserRouter><Routes><Route path="/" element={<Home />} /><Route path="users/*" element={<Users />} /></Routes></BrowserRouter>);
}function Users() {return (<div><nav><Link to="me">My Profile</Link></nav><Routes><Route path=":id" element={<UserProfile />} /><Route path="me" element={<OwnUserProfile />} /></Routes></div>);
}
v5 应用程序中的所有 <Route children> 在 v6 中都变为了 <Route element={}>
对于子路由,index设置为true时,相当于一个默认的子路由
关于 <Route path> 模式的注意事项
React Router v6 使用简化的路径格式。在 v6 中, <Route path> 只支持两种占位符:动态 :id 样式的参数和 * 通配符。 * 通配符只能在路径末尾使用,不能在中间使用。
/groups
/groups/admin
/users/:id
/users/:id/messages
/files/*
/files/:id/*
在 v6 中,无论当前 URL 如何, <Link to="me"> 都会呈现相同的 <a href> 。
使用useRoutes代替react-router-config
v5 版本的 react-router-config 包中的所有功能都已移至 v6 的核心中。如果您喜欢/需要将路由定义为 JavaScript 对象,而不是使用 React 元素,那么您一定会喜欢这个功能。
function App() {let element = useRoutes([// These are the same as the props you provide to <Route>{ path: "/", element: <Home /> },{ path: "dashboard", element: <Dashboard /> },{path: "invoices",element: <Invoices />,// Nested routes use a children property, which is also// the same as <Route>children: [{ path: ":id", element: <Invoice /> },{ path: "sent", element: <SentInvoices /> },],},// Not found routes work as you'd expect{ path: "*", element: <NotFound /> },]);// The returned element will render the entire element// hierarchy with all the appropriate context it needsreturn element;
}
使用useNavigate代替useHistory
React Router v6 引入了新的导航 API,该 API 与 <Link> 同义,可更好地兼容启用了悬念的应用程序。根据您的风格和需求,我们提供了该 API 的命令式和声明式版本。
useHistory 更改为 useNavigate ,并更改 history.push 或 history.replace 调用站点。
// This is a React Router v6 app
import { useNavigate } from "react-router-dom";function App() {let navigate = useNavigate();function handleClick() {navigate("/home");}return (<div><button onClick={handleClick}>go home</button></div>);
}
注意:请注意,v5 版 <Redirect /> 默认使用 replace 逻辑(可通过 push 属性进行更改),而 v6 版 <Navigate /> 默认使用 push 逻辑,可通过 replace 属性进行更改。
相关文章:
ReactRouter v6升级的步骤
React Router v6 引入了一个 Routes 组件,它有点像 Switch ,但功能要强大得多。与 Switch 相比, Routes 的主要优势在于: <Routes> 中的所有 <Route> 和 <Link> 都是相对的。这导致在 <Route path> 和 &…...
【JVM实战篇】内存调优:内存问题诊断+案例实战
文章目录 诊断内存快照在内存溢出时生成内存快照MAT分析内存快照MAT内存泄漏检测的原理支配树介绍如何在不内存溢出情况下生成堆内存快照?MAT查看支配树MAT如何根据支配树发现内存泄漏 运行程序的内存快照导出和分析快照**大文件的处理** 案例实战案例1:…...
专业条码二维码扫描设备和手机二维码扫描软件的区别?
条码二维码技术已广泛应用于我们的日常生活中,从超市结账到公交出行,再到各类活动的入场验证,条码二维码的便捷性不言而喻,而在条码二维码的扫描识别读取过程中,专业扫描读取设备和手机二维码扫描软件成为了两大主要工…...
基于嵌入式Linux的高性能车载娱乐系统设计与实现 —— 融合Qt、FFmpeg和CAN总线技术
随着汽车智能化的发展,车载娱乐系统已成为现代汽车的标配。本文介绍了一个基于Linux的车载娱乐系统的设计与实现过程。该系统集成了音视频娱乐、导航、车辆信息显示等功能,旨在提供安全、便捷、丰富的驾驶体验。 1. 项目概述 随着汽车智能化的发展&…...
探索IP形象设计:快速掌握设计要点
随着市场竞争的加剧,越来越多的企业开始关注品牌形象的塑造和推广。在品牌形象中,知识产权形象设计是非常重要的方面。在智能和互联网的趋势下,未来的知识产权形象设计可能会更加关注数字和社交网络。通过数字技术和社交媒体平台,…...
泛微Ecology8明细表对主表赋值
文章目录 [toc]1.需求及效果1.1 需求1.2 效果2.思路与实现3.结语 1.需求及效果 1.1 需求 在明细表中的项目经理,可以将值赋值给主表中的项目经理来作为审批人员 1.2 效果 在申请人保存或者提交后将明细表中的人名赋值给主表中对应的值2.思路与实现 在通过js测…...
opencv—常用函数学习_“干货“_5
目录 十五、图像分割 简单阈值分割 (threshold) 自适应阈值分割 (adaptiveThreshold) 颜色范围分割 (inRange) 分水岭算法 (watershed) 泛洪填充 (floodFill) GrabCut算法 (grabCut) 距离变换 (distanceTransform) 最大稳定极值区域检测 (MSER) 均值漂移滤波 (pyrMean…...
JAVA零基础学习1(CMD、JDK、环境变量、变量和键盘键入、IDEA)
JAVA零基础学习1(CMD、JDK、环境变量、变量和键盘键入、IDEA) CMD常见命令配置环境变量JDK的下载和安装变量变量的声明和初始化声明变量初始化变量 变量的类型变量的作用域变量命名规则示例代码 键盘键入使用 Scanner 类读取输入步骤示例代码 常用方法处…...
Redis的安装配置及IDEA中使用
目录 一、安装redis,配置redis.conf 1.安装gcc 2.将redis的压缩包放到指定位置解压 [如下面放在 /opt 目录下] 3.编译安装 4.配置redis.conf文件 5.开机自启 二、解决虚拟机本地可以连接redis但是主机不能连接redis 1.虚拟机网络适配器网络连接设置为桥接模式…...
ubuntu 物理内存爆炸而不使用虚拟内存的问题
ubuntu 物理内存不足时有时候会不去使用虚拟内存,让虚拟内存空闲,而直接关闭占用内存的进程,如果在进行模型测试或训练时,就会导致训练或测试进程被杀死。 1. 修改 swappiness: cat /proc/sys/vm/swappiness sudo sysc…...
Python实现音频均衡和降噪
使用librosa库来读取音频文件,音频处理是一个复杂过程,这里只是简单的进行降噪和均衡。 import librosa import soundfile as sf def improve_audio_quality(input_file, output_file): # 读取音频文件 audio, sample_rate librosa.load(input_…...
【JavaScript 算法】贪心算法:局部最优解的构建
🔥 个人主页:空白诗 文章目录 一、贪心算法的基本概念贪心算法的适用场景 二、经典问题及其 JavaScript 实现1. 零钱兑换问题2. 活动选择问题3. 分配问题 三、贪心算法的应用四、总结 贪心算法(Greedy Algorithm)是一种逐步构建解…...
Azcopy Sync同步Azure文件共享
文章目录 Azcopy Sync同步文件共享一、工作原理二、安装 AzCopy在 Windows 上在 Linux 上 三、资源准备1. 创建源和目标 Azure 存储账户2. 创建源和目标文件共享3. 确定路径4. 生成源和目的存储账户的共享访问签名(SAS)令牌配置权限示例生成的 URL 四、A…...
单例模式 饿汉式和懒汉式的区别
单例模式(Singleton Pattern)是设计模式中最简单、最常见、最容易实现的一种模式。它确保一个类仅有一个实例,并提供一个全局访问点。单例模式主要有两种实现方式:饿汉式(Eager Initialization)和懒汉式&am…...
Python中的模块和包的定义以及如何在Python中导入和使用它们
在Python中,模块(Module)和包(Package)是组织代码以便重用和共享的基本单元。它们使得Python代码更加模块化,易于管理和维护。 模块(Module) 模块是一个包含Python代码的文件&…...
设计模式使用场景实现示例及优缺点(结构型模式——组合模式)
结构型模式 组合模式(Composite Pattern) 组合模式使得用户对单个对象和组合对象的使用具有一致性。 有时候又叫做部分-整体模式,它使我们树型结构的问题中,模糊了简单元素和复杂元素的概念,客户程序可以像处理简单元…...
《系统架构设计师教程(第2版)》第11章-未来信息综合技术-06-云计算(Cloud Computing) 技术概述
文章目录 1. 相关概念2. 云计算的服务方式2.1 软件即服务 (SaaS)2.2 平台即服务 (PaaS)2.3 基础设施即服务 (IaaS)2.4 三种服务方式的分析2.4.1 在灵活性2.4.2 方便性方 3. 云计算的部署模式3.1 公有云3.2 社区云3.3 私有云3.4 混合云 4. 云计算的发展历程4.1 虚拟化技术4.2 分…...
网络安全工作者如何解决网络拥堵
网络如同现代社会的血管,承载着信息的血液流动。然而,随着数据流量的激增,网络拥堵已成为不容忽视的问题,它像是一场数字世界的交通堵塞,减缓了信息传递的速度,扰乱了网络空间的秩序。作为网络安全的守护者…...
电脑显示mfc140u.dll丢失的修复方法,总结7种有效的方法
mfc140u.dll是什么?为什么电脑会出现mfc140u.dll丢失?那么mfc140u.dll丢失会给电脑带来什么影响?mfc140u.dll丢失怎么办?今天详细给大家一一探讨一下mfc140u.dll文件与mfc140u.dll丢失的多种不同解决方法分享! 一、mfc…...
ospf的MGRE实验
第一步:配IP [R1-GigabitEthernet0/0/0]ip address 12.0.0.1 24 [R1-GigabitEthernet0/0/1]ip address 21.0.0.1 24 [R1-LoopBack0]ip address 192.168.1.1 24 [ISP-GigabitEthernet0/0/0]ip address 12.0.0.2 24 [ISP-GigabitEthernet0/0/1]ip address 21.0.0.2 24…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站,会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后,网站没有变化的情况。 不熟悉siteground主机的新手,遇到这个问题,就很抓狂,明明是哪都没操作错误&#x…...
接口测试中缓存处理策略
在接口测试中,缓存处理策略是一个关键环节,直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性,避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明: 一、缓存处理的核…...
Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...
【入坑系列】TiDB 强制索引在不同库下不生效问题
文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现
摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序,以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务,提供稳定高效的数据处理与业务逻辑支持;利用 uniapp 实现跨平台前…...
C++ 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
今日科技热点速览
🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售,主打更强图形性能与沉浸式体验,支持多模态交互,受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...
如何在最短时间内提升打ctf(web)的水平?
刚刚刷完2遍 bugku 的 web 题,前来答题。 每个人对刷题理解是不同,有的人是看了writeup就等于刷了,有的人是收藏了writeup就等于刷了,有的人是跟着writeup做了一遍就等于刷了,还有的人是独立思考做了一遍就等于刷了。…...
在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案
这个问题我看其他博主也写了,要么要会员、要么写的乱七八糟。这里我整理一下,把问题说清楚并且给出代码,拿去用就行,照着葫芦画瓢。 问题 在继承QWebEngineView后,重写mousePressEvent或event函数无法捕获鼠标按下事…...
Caliper 配置文件解析:fisco-bcos.json
config.yaml 文件 config.yaml 是 Caliper 的主配置文件,通常包含以下内容: test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...
