react-router-dom5升级到6

前言

升级前版本为5.1.2

下载与运行

下载

npm install react-router-dom@6

运行

运行发现报错:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

将node_modules删除,重新执行npm i即可

运行发现如下报错

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

这是因为之前有引用react-router-dom.min,v6中取消了该文件,所以未找到文件导致报错。

将引用变为react-router-dom即可解决。

再次运行发现如下报错:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

这是因为react-router-dom6取消了withRouter,如果想要获取路由地址,需要使用useLocation

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

变为

在这里插入图片描述

再次运行发现如下报错:

在这里插入图片描述

按照官网进行如下修改:

Switch 被替换为 Routes

v5 时代的第一个被替代的是Switch组件。该Switch组件用于包装我们的路由,它确保每次只加载一个匹配的路由。但这在 v6 中不再存在。我们使用Routes组件来替换Switch。请注意,我们仍然需要导入BrowserRouter包装我们的应用程序,就像在 v5 中所做的那样。

在 v5 中,我们是这样做:

import { BrowserRouter, Switch } from "react-router-dom";function App() {return (<BrowserRouter><div className="App"><Switch>{/* 路由Route在此定义 */}</Switch></div></BrowserRouter>);
}
export default App

但在 v6 中,我们将这样做

import { BrowserRouter, Routes } from "react-router-dom";function App() {return (<BrowserRouter><div className="App"><Routes>{/* Switch 会被改成 Routes */}{/* 路由Route在此定义 */}</Routes></div></BrowserRouter>);
}export default App

注意:v5的Switch中可以包含非Route元素,但Routes中只能存在Route,否则会报错。
在这里插入图片描述

Route组件使用更新

尽管该Route组件在 v6 中仍然保留一个位置,但我们定义它的使用方式与我们在 v5 中的方式不同。我们将不再以 v5 中的任何方式放置我们想要渲染的组件,而是统一将其作为elementprop的值传递。

没有exact配置

v5 中,不添加exact作为Route组件props的话,如果 URL 以 path 关键字开头,则路径将匹配,因为匹配过程是从上到下的顺序。但在 v6 中,我们将不再需要该exact配置,因为路径模式匹配算法已更改,并且现在更加增强。

在 v5 中,我们这样做了:

<Switch>{/* 三种Route组件使用定义 */}<Route path="/signup" component={Product} />{/* 或 */}{/* 这个方法允许我们将 props 传递给渲染的组件 */}<Route path="/games"><Product id={2} /></Route>{/* 或是通过render函数 */}<Route path="/games" render={(props) => <Product {...props} />} />
</Switch>

在 v6 中,

<Routes>{" "}<Route path="/games" element={<Product />} />{/* 带有props的渲染组件 */}<Route path="/movies" element={<Product id={200} category="shirt" />} />
</Routes>

Links 和 NavLinks

LinkNavLink组件仍然可以运行在V6。Link组件使用与在 v5 的时候保持一样,但使用NavLink组件时,删除了activeClassNameactiveStyle prop。在 v5 中,activeClassNameprop 用于在链接激活后自动将一些 CSS 类应用于链接,同时activeStyle允许我们在链接激活时向链接添加内部样式。

但是在 v6 中,现在可以使用一个函数来获取有关链接活动状态的信息。该函数的参数是一个具有属性的对象isActive。此属性在链接处于活动状态时为,在非活动时为isActive的值允许我们使用条件表达式来指示活动样式或类名。

在 v5 中,

import {NavLink} from “react-router-dom”{/* … */}
<NavLinkto="/product"style={{ color: "#689" }}activeStyle={{ color: "#3072c9" }}className="nav_link"activeClassName="active"
>Products
</NavLink>

但在 v6 中,我们将这样做:

<NavLinkto="/product"style={({ isActive }) => ({ color: isActive ? "#3072c9" : "#689" })}className={({ isActive }) => `link${isActive ? " active" : ""}`}
>Product
</NavLink>

Navigate替代Redirect

在 v5 中,使用该Redirect组件将一个页面带到另一个页面,但它不再从 v6 中的 react-router-dom 导出。它已被Navigate组件替换。

在 v5 中,

<Route path="/faq"><Redirect to="/about" />
</Route>
<Route path="/about" component={About} />

但在 v6 中,

<Route path="/games" element={<Navigate to="/about" />} />;
<Route path="/games" element={<About />} />;

需要注意的是,如果只是按照Navigate上面代码片段中的方式添加组件,它只会将导航到该路径的导航推送到导航堆栈中,但是如果我们打算用新页面替换当前页面,我们将 replace 属性添加到Navigate组件中,如下所示:

<Route path="/games" element={<Navigate replace to="/about" />} />;

嵌套路由

顾名思义,嵌套路由是放置在另一个路由中的路由。它们用于在子组件中呈现更具体的信息。在 v6 中,将嵌套路由放置为父路由的子路由。然后引入Outlet组件,它是从渲染组件中的 react-router-dom 导出的,用于指定希望嵌套信息显示在哪里。Outlet 组件不是必需的,但它使代码更清晰。
在 v5 中,

import { useRouteMatch } from "react-router-dom";
function App() {return (<BrowserRouter><Switch><Route exact path="/about" component={About} /><Route path="/product" component={Product} /></Switch></BrowserRouter>);
}function Product() {let match = useRouteMatch();return (<div><Switch>{/* match.path 返回父路由中指定的路径。在这种情况下,它是“/product" */}<Route path={`${match.path}`}><AllProducts /></Route>{/* 匹配 /product/:id */}<Route path={`${match.path}/:id`}><ProductDetail /></Route></Switch></div>);
}

在 v6 中,

import { Outlet } from "react-router-dom";function App() {return (<Routes><Route path="/about" element={<About />} /><Route path="/product" element={<Product />}>{/* 这里嵌套路由的路径是相对于父路由的路径的。 */}{/* 这里变成 "/product/" */}<Route path="/" element={<AllProducts />} />{/* 这里变成 "/product/:id" */}<Route path="/:id" element={<ProductDetail />} /></Route></Routes>);
}function Product() {return (<Container><><div>Product</div>{/* 父组件的其他内容 */}</>{/* 这是嵌套信息开始的地方 */}<Outlet /></Container>);
}

useNavigate代替useHistory

当用户因路径上发生的事件(例如单击按钮、API 请求完成等)而被重定向时,就会发生程序化导航。在 v5 中,可以使用useHistory钩子来执行以下操作:

import { useHistory } from "react-router-dom";function Product() {const history = useHistory();const handleClick = () => {//这会将新路线推送到导航堆栈的顶部history.push("/new-route");history.push({pathname:"/new-route",state:{p1:xxx});  // 传参//这会将当前路线替换为导航堆栈中的新路由history.replace("/new-route");};return (<div><button>点击我重定向到新路由</button></div>);
}

但是在 v6 中,useHistoryhook 被替换为useNavigatehook,并且以不同的方式使用它。

import { useNavigate } from "react-router-dom";function Product() {const navigate = useNavigate();const handleClick = () => {//这会将新路线推送到导航堆栈的顶部navigate("/new-route");navigate("/new-route",{state:{p1:xxx}});  // 传参//这会将当前路线替换为导航堆栈中的新路由navigate("/new-route", { replace: true });};return (<div><button>点击我重定向到新路由</button></div>);
}

一件很酷的事情是以在导航堆栈上任意前进和后退。通过使用正数作为上述参数navigate(),路由会向前移动该步数。负数向后做同样的事情

// Goes forward
navigate(1)
// Goes forward twice
navigate(2)
// Goes backward
navigate(-1)
// Goes backward three times
navigate(-3)

删除Prompt组件

Prompt如果有未保存的更改,v5 中的组件可防止意外离开页面。但是 react-router 团队并没有将它包含在 v6 中,也没有替代方案。因此,如果你需要该功能,你可以手动实现它或返回到 v5。

除了不包括Prompt在当前版本(v6)中,useBlockerusePrompt都不起作用。react-router 团队虽然在官方文档中表示,他们目前正在努力将其添加回 v6,但不是针对 6.x 的第一个稳定版本。

注意

react-router-dom5的Switch可以嵌套Redirect

但react-router-dom6的Routes中只可以存在Route和Route.Fragment

v5的Router写法,需要利用history

import { createBrowserHistory } from "history"
const customHistory = createBrowserHistory()const Root = () => {return (<Router history={customHistory}>......</Router>)
}

v6直接更改路由引入方式即可

import { BrowserRouter } from "react-router-dom"const Root = () => {return (<BrowserRouter>......</BrowserRouter>)
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/587463.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

区块链智能合约恶意交易2022-2024相关论文及idea

写在前面 使用chatpdf&#xff0c;翻译摘要&#xff0c;借鉴参考链接&#xff1a;https://github.com/hzysvilla/Academic_Smart_Contract_Papers的方式快速调研当前顶会的论文idea。 Phoenix: Detect and Locate Resilience Issues in Blockchain via Context-Sensitive Cha…

抖音详情API:开发环境搭建与工具选择

随着短视频的流行&#xff0c;抖音已经成为了一个备受欢迎的社交媒体平台。对于开发人员而言&#xff0c;利用抖音详情API开发定制化的抖音应用具有巨大的潜力。本文将为你详细介绍开发抖音应用的开发环境搭建与工具选择&#xff0c;帮助你顺利地开始开发工作。 一、开发环境搭…

速盾网络:cdn数量对网站访问速度的影响

CDN&#xff08;内容分发网络&#xff09;是提高互联网性能和用户体验的关键技术之一&#xff0c;而CDN节点的数量直接影响着访问速度和服务质量。速盾网络作为一家专业的网络安全和CDN服务提供商&#xff0c;深知节点数量在优化用户体验方面的关键性作用。 首先&#xff0c;让…

【网络安全 | Misc】miss_01 太湖杯

解压时提示输入密码&#xff1a; 如果 frFlags 或 deFlags 不为0会导致zip的伪加密 将deFlags的值修改为0 将9改为0&#xff0c;另存为123.zip&#xff1a; 即可绕过加密&#xff1a; 得到一个zip一个docx&#xff0c;但zip需要密码&#xff1a; 因此看docx有无敏感信息&#x…

机器学习、人工智能、深度学习的关系

人工智能(Artificial Intelligence&#xff0c;AI) 人工智能范围很广&#xff0c;它是一门新的科学与工程&#xff0c;是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的技术科学&#xff0c;研究内容涵盖语音识别、图像识别、自然语言处理、智能搜索和…

计算机毕业设计------ssm茶叶溯源系统

项目介绍 茶叶溯源系统&#xff0c;分为前台与后台。普通用户可在前台通过18位的编码查询茶叶的出售历史。 后台分为两种角色&#xff0c;管理员与经销商&#xff1b; 管理员主要功能包括&#xff1a; 主界面&#xff1b; 管理员管理&#xff1a;管理员列表、添加管理员&am…

Mybatis Java API - Mapper 注解

MyBatis自诞生以来一直是一个以XML驱动的框架。配置是基于XML的&#xff0c;映射语句也是在XML中定义的。随着MyBatis 3的推出&#xff0c;有了新的选择。MyBatis 3建立在一个全面而强大的基于Java的配置API之上。该配置API是基于XML的MyBatis配置以及新的基于注解的配置的基础…

跨域请求:Go语言下的“通天大道”

开场白&#xff1a;嘿&#xff0c;各位Go语言的爱好者们&#xff0c;你们是否曾经遇到过这样的困扰&#xff1a;当你的Go应用试图与另一个域的API进行交流时&#xff0c;突然跳出一个“未允许的跨域请求”的警告&#xff1f;别担心&#xff0c;今天&#xff0c;我们将一起在这条…

005、数据类型

1. 关于数据类型 Rust中&#xff0c;每个值都有其特定的数据类型&#xff0c;Rust会根据数据的类型来决定如何处理它们。 Rust是一门静态类型语言&#xff0c;它在编译程序的过程中就需要知道所有变量的具体类型。在大部分情况下&#xff0c;编译器可以根据我们如何绑定、使用变…

数据结构-怀化学院期末题(58)

今天发现了一个事情&#xff0c;学校平台可以交c代码&#xff0c;那以后都用c。但是不可以使用迭代器&#xff0c;否则会出现编译错误&#xff01;&#xff01;&#xff01; 题目描述&#xff1a; 小学求算式问题。要求采用栈实现。 输入&#xff1a; 输入第一行为用例个数n。 …

软件测试/测试开发丨Python 内置装饰器 学习笔记

内置类装饰器 不用实例化、直接调用提升代码的可读性 内置装饰器含义classmethod类方法staticmethod静态方法 普通方法 定义&#xff1a; 第一个参数为self&#xff0c;代表 实例本身 调用&#xff1a; 要有实例化的过程&#xff0c;通过 实例对象.方法名 调用 # 1. 定义 c…

Golang简单实现IO操作

在任何语言的开发中&#xff0c;输入/输出 (I/O) 操作都是非常关键的一部分。Golang 提供了 io 和 io/ioutil 标准库&#xff0c;帮助我们进行方便、高效的I/O操作。通过这篇文章&#xff0c;你将了解io库如何提供了对IO原语的基本接口&#xff0c;而io/ioutil库则提供了一些更…

2023.12.31每日一题

LeetCode每日一题 2023年的最后一题 1154.一年中的第几天 1154. 一年中的第几天 - 力扣&#xff08;LeetCode&#xff09; 描述 给你一个字符串 date &#xff0c;按 YYYY-MM-DD 格式表示一个 现行公元纪年法 日期。返回该日期是当年的第几天。 示例 1&#xff1a; 输入&a…

unity控制摄像机几种视角实现方式

目录 1、按下鼠标右键可以实现摄像机上下左右旋转 2、自由视角 3、摄像头跟随视角 4、跟随自由视角 5、第一人称跟随视角 python学习汇总连接&#xff1a; 1、按下鼠标右键可以实现摄像机上下左右旋转 这段代码定义了一个名为CameraRotate的脚本&#xff0c;用于控制摄像…

一文详解pyspark常用算子与API

rdd.glom() 对rdd的数据进行嵌套&#xff0c;嵌套按照分区来进行 rdd sc.parallelize([1, 2, 3, 4, 5, 6, 7, 8, 9], 2)print(rdd.glom().collect()) 输出&#xff1a;[[1,2,3,4],[5,6,7,8,9]] 参考 PySpark基础入门&#xff08;2&#xff09;&#xff1a;RDD及其常用算子…

2023年终总结 —— 我和CSDN相遇的第一年之“技术学习和个人成长的回顾与展望”

​ ​ &#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 &#x1f4ab;个人格言:"没有罗马,那就自己创造罗马~" 目录 &#x1f38a;对2023的总结与回顾&#x1f38a; &#x1f3c5;获奖记录 &#x1f4da;学…

机器学习库【03】:-NumPy-算术运算

一、说明 与常规数学一样&#xff0c;数组算术本质上是关于加法、减法、乘法和除法。在 中NumPy&#xff0c;此类操作是按元素执行的 [2]&#xff1a; NumPy 是 Numerical Python 的缩写&#xff0c;是 Python 生态系统中一个功能强大的库&#xff0c;它提供对大型多维数组和矩…

CentOS虚拟机硬盘管理

CentOS虚拟机硬盘管理 一、创建虚拟机时分配硬盘 创建虚拟机时&#xff0c;在下图这个页面需要重新选择一下硬盘&#xff0c;可以对硬盘进行配置。 默认自动分区 ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/e9ce72af3d934e75be95f7f86860e92b.png 选择确认分…

EasyExcel详解(结合官方文档)

EasyExcel 零、前言 文章是根据官方文档&#xff0c;加上自己的测试运行总结出来的&#xff0c;目前只总结的EasyExcel读的部分&#xff0c;写的部分还未完结&#xff0c;后续会更新1、官方文档 https://easyexcel.opensource.alibaba.com/2、EasyExcel的maven依赖 <!--…

TikTok真题第10天 | 1541.平衡括号字符串的最少插入次数、1209.删除字符串中所有相邻重复项、1530.好叶子结点对的数量

1541.平衡括号字符串的最少插入次数 题目链接&#xff1a;1541.minimum-insertions-to-balance-a-parentheses-string 解法&#xff1a; 官方题解这次写得非常好。参考题解&#xff1a;左右括号匹配 这道题一眼看过去&#xff0c;就是用栈解决。不过可以使用计数代替栈&…