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 属性进行更改。

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

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

相关文章

项目文章|EMBO J(IF=9.4):16S+代谢组解析肠道菌群代谢物改善高脂饮食诱导的胰岛素抵抗机制

肠道菌群及其代谢产物与肥胖相关疾病&#xff08;如2型糖尿病&#xff09;密切相关&#xff0c;但其因果关系和潜在机制尚不清楚。研究表明&#xff0c;肥胖与肠道微生物的丰度和多样性变化有关&#xff0c;例如&#xff0c;高脂饮食&#xff08;HFD&#xff09;诱导的肥胖会增…

AIGC率超标?掌握论文去AI痕迹的高效策略

随着 AI 技术迅猛发展&#xff0c;各种AI辅助论文写作的工具层出不穷&#xff01; 为了防止有人利用AI工具进行论文代写&#xff0c;在最新的学位法中已经明确规定“已经获得学位者&#xff0c;在获得该学位过程中如有人工智能代写等学术不端行为&#xff0c;经学位评定委员会…

ESP32CAM物联网教学11

ESP32CAM物联网教学11 霍霍webserver 在第八课的时候&#xff0c;小智把乐鑫公司提供的官方示例程序CameraWebServer改成了明码&#xff0c;这样说明这个官方程序也是可以更改的嘛。这个官方程序有四个文件&#xff0c;一共3500行代码&#xff0c;看着都头晕&#xff0c;小智决…

S7-200smart与C#通信

https://www.cnblogs.com/heizao/p/15797382.html C#与PLC通信开发之西门子s7-200 smart_c# s7-200smart通讯库-CSDN博客https://blog.csdn.net/weixin_44455060/article/details/109713121 C#上位机读写西门子S7-200SMART PLC变量 教程_哔哩哔哩_bilibilihttps://www.bilibili…

清朝嘉庆二十五年(1820年)地图数据

我们在《中国历史行政区划连续变化数据》一文中&#xff0c;为你分享了中国历史行政区划连续变化地图数据。 现在再为你分享清朝嘉庆二十五年&#xff08;1820年&#xff09;的地图数据&#xff0c;该数据对于研究历史的朋友应该比较有用&#xff0c;请在文末查看领取方式。 …

【Rust练习】2.数值类型

练习题来自https://practice-zh.course.rs/basic-types/numbers.html 1 // 移除某个部分让代码工作 fn main() {let x: i32 5;let mut y: u32 5;y x;let z 10; // 这里 z 的类型是? }y的类型不对&#xff0c;另外&#xff0c;数字的默认类型是i32 fn main() {let x: i…

Jupyter Lab 使用

Jupyter Lab 使用详解 Jupyter Lab 是一个基于 Web 的交互式开发环境&#xff0c;提供了比 Jupyter Notebook 更加灵活和强大的用户界面和功能。以下是使用 Jupyter Lab 的详细指南&#xff0c;包括安装、基本使用、设置根目录和扩展功能等内容。 一、Jupyter Lab 安装与启动…

HTTP背后的故事:理解现代网络如何工作的关键(一)

一.HTTP是什么 概念 &#xff1a; 1.HTTP ( 全称为 " 超文本传输协议 ") 是一种应用非常广泛的 应用层协议。 2.HTTP 诞生与1991年. 目前已经发展为最主流使用的一种应用层协议. 3.HTTP 往往是基于传输层的 TCP 协议实现的 . (HTTP1.0, HTTP1.1, HTTP2.0 均为 T…

DelphiXE内存泄漏问题,已经发生了很多次

内存泄漏的地方一定要注意: 不断分配的Tbytes会导致内存泄漏,发生以下错误: Access violation at address CA5ED400. Execution of address CA5ED400 {=====内存泄漏最大的地方、居然没有释放=====} //SetLength(tbuff,length(Adata)); //Move(Adata,Tbuff,length(…

2024世界人工智能大会(WAIC)学习总结

1 前言 在2024年的世界人工智能大会&#xff08;WAIC&#xff09;上&#xff0c;我们见证了从农业社会到工业社会再到数字化社会的深刻转变。这一进程不仅体现在技术的单点爆发&#xff0c;更引发了整个产业链的全面突破&#xff0c;未来将是技术以指数级速度发展的崭新时代。…

等保测评别犯难,黑龙江等保测评服务流程来啦!

引言 在当今数字化时代&#xff0c;网络安全已经成为企业发展的基石。为了响应国家网络安全等级保护&#xff08;简称“等保”&#xff09;政策&#xff0c;黑龙江地区的企业纷纷启动了等保测评工作。然而&#xff0c;对于很多企业而言&#xff0c;等保测评似乎是一项既复杂又…

【从0到1进阶Redis】主从复制 — 主从机宕机测试

上一篇&#xff1a;【从0到1进阶Redis】主从复制 测试&#xff1a;主机断开连接&#xff0c;从机依旧连接到主机的&#xff0c;但是没有写操作&#xff0c;这个时候&#xff0c;主机如果回来了&#xff0c;从机依旧可以直接获取到主机写的信息。 如果是使用命令行&#xff0c;来…

PyTorch深度学习实战(46)——深度Q学习

PyTorch深度学习实战&#xff08;46&#xff09;——深度Q学习 0. 前言1. 深度 Q 学习2. 网络架构3. 实现深度 Q 学习模型进行 CartPole 游戏小结系列链接 0. 前言 我们已经学习了如何构建一个 Q 表&#xff0c;通过在多个 episode 中重复进行游戏获取与给定状态-动作组合相对…

Hypertable install of rhel6.0

1.rpm 安装:(如果已存在,会提示冲突,使用--replacefiles) 1.1 编译环境 安装gcc gcc-c++ make cmake(在admin machine上,放置rpm包的文件里依次执行下面的语句): sudo rpm -ivh cpp-4.4.6-4.el6.x86_64.rpm --replacefiles sudo rpm -ivh libgcc-4.4.6-4.el6.x86_64.rp…

【学习笔记】无人机(UAV)在3GPP系统中的增强支持(十四)-无人机操控关键绩效指标(KPI)框架

引言 本文是3GPP TR 22.829 V17.1.0技术报告&#xff0c;专注于无人机&#xff08;UAV&#xff09;在3GPP系统中的增强支持。文章提出了多个无人机应用场景&#xff0c;分析了相应的能力要求&#xff0c;并建议了新的服务级别要求和关键性能指标&#xff08;KPIs&#xff09;。…

第二证券:转融通是什么意思?什么是转融通?

转融通&#xff0c;包含转融资和转融券&#xff0c;实质是借钱和借券。转融通是指证券金融公司借入证券、筹得资金后&#xff0c;再转借给证券公司&#xff0c;是一假贷联络&#xff0c;具体是指证券公司从符合要求的基金处理公司、保险公司、社保基金等组织出资者融券&#xf…

Python应用开发——30天学习Streamlit Python包进行APP的构建(15):优化性能并为应用程序添加状态

Caching and state 优化性能并为应用程序添加状态! Caching 缓存 Streamlit 为数据和全局资源提供了强大的缓存原语。即使从网络加载数据、处理大型数据集或执行昂贵的计算,它们也能让您的应用程序保持高性能。 本页仅包含有关 st.cache_data API 的信息。如需深入了解缓…

技术成神之路:设计模式(六)策略模式

1.介绍 策略模式&#xff08;Strategy Pattern&#xff09;是一种行为型设计模式&#xff0c;它定义了一系列算法&#xff0c;封装每一个算法&#xff0c;并使它们可以相互替换。策略模式使得算法的变化独立于使用算法的客户端。 2.主要作用 策略模式的主要作用是将算法或行为…

面试问题梳理:项目中防止配置中的密码泄露-Jasypt

背景 想起面试的时候&#xff0c;面试官问我现在大家用Spring框架&#xff0c;数据库、ES之类的密码都是配置在配置文件中的&#xff0c;有很大的安全隐患&#xff0c;你有考虑过怎么解决嘛&#xff1f; 当时我回答是可以在项目启动的过程中的命令行追加的方式&#xff0c;感觉…

Hello,World!(C++)

题目描述 编写一个能够输出 Hello,World! 的程序。 提示&#xff1a; - 使用英文标点符号&#xff1b; Hello,World! 逗号后面没有空格。 H 和 W 为大写字母。 样例 #1 样例输入 #1 无 样例输出 #1 Hello,World! &#xff08;1&#xff09; #include<bits/stdc.…