React ~ React Router 6
React Router 6 VS React Router 5.x
- 内置组件的变化; 移除<Switch /> , 新增<Routes />
- 语法的变化; component = { About } 变为 element = { <About /> }
- 新增多个hook
- 官方明确推荐函数式组件了!
一级路由(变化)
- 安装路由 npm i react-router-dom (默认是最新版本)
- 路由链接用NavLink(高亮)来导航, 并通过to属性来进行跳转操作
- 呈现路由的时候,需要注册路由 实用Routes代替了Switch; Switch当时写了是涉及到了一个匹配效率的问题,匹配到了就不会继续往下匹配,之前是一定要写
componen = { About } 变为 element = { <About /> }
重定向 Navigate(变化)
- 作用; 只要<Navigate> 组件被渲染,就会修改路径,切换视图
- replace属性用于控制跳转模式, (push 或 replace, 默认是push)
规则
{/* 注册路由 */}
<Routes><Route path="/ABOUT" element={<About/>}/><Route path="/home" element={<Home/>}/><Route path="/" element={<Navigate to="/about"/>}/>
</Routes>
NavLink高亮(变化)
你要想自定义类名,需要把className写成一个函数的形式
- 较长的时候,抽出一个函数
function computedClassName({isActive}){return isActive ? 'list-group-item atguigu' : 'list-group-item'
}
// 在路由中使用高亮的自定义属性
<div className="col-xs-2 col-xs-offset-2"><div className="list-group">{/* 路由链接 */}<NavLink className={computedClassName} to="/about">About</NavLink><NavLink className={computedClassName} to="/home">Home</NavLink></div>
</div>
useRoutes路由表
- 将之前那一堆抽取出去, 使用hooks来处理
export default [{path:'/about',element:<About/>},{path:'/home',element:<Home/>},{path:'/',element:<Navigate to="/about"/>}
]
// 引入上述代码, 然后使用hooks
const element = useRoutes(routes)
// 使用路由表
<div className="panel-body">{/* 注册路由 */}{element}
</div>
嵌套路由
- 直接在路由表中加上相应的children属性, 用于相关操作
export default [{path:'/about',element:<About/>},{path:'/home',element:<Home/>,children:[{// 注意; 子级路由不用加上斜杠path:'news',element:<News/>},{path:'message',element:<Message/>}]},{path:'/',element:<Navigate to="/about"/>}
]
- 使用Outlet来指定路由呈现的位置
<div><h2>Home组件内容</h2><div><ul className="nav nav-tabs"><li>{/* 书写子级路由的时候不需要传参 */}<NavLink className="list-group-item" to="news">News</NavLink></li><li><NavLink className="list-group-item" to="message">Message</NavLink></li></ul>{/* 指定路由组件呈现的位置 */}<Outlet /></div>
</div>
相关文章:
React ~ React Router 6
React Router 6 VS React Router 5.x 内置组件的变化; 移除<Switch /> , 新增<Routes />语法的变化; component { About } 变为 element { <About /> }新增多个hook官方明确推荐函数式组件了! 一级路由(变化) 安装路由 npm i react-router-dom (默认是最…...
【LeetCode每日一题】——304.二维区域和检索-矩阵不可变
文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时间频度】九【代码实现】十【提交结果】 一【题目类别】 矩阵 二【题目难度】 中等 三【题目编号】 304.二维区域和检索-矩阵不可变 四【题目描述】 …...
硬件串口通信协议学习(UART、IIC、SPI、CAN)
0.前言 学习资料:江协科技的个人空间-江协科技个人主页-哔哩哔哩视频 通信的目的:将一个设备的数据传送到另一个设备,扩展硬件系统通信协议:制定通信的规则,通信双方按照协议规则进行数据收发 全双工:通信…...
第一章-JavaScript基础进阶part2:事件
文章目录 概念一、注册事件(绑定事件)1.1 addEventListener事件监听 二、删除事件(解绑)三、DOM事件流四、事件对象event4.1 e.target与this与e.currentTarget的区别4.2 事件对象的常见属性 五、阻止事件默认行为及冒泡六、事件委…...
如何优雅的使用后端接口
优雅的后端接口 一个后端接口大致分为四个部分:接口地址(url)、接口请求方式(get、post等)、请求数据(request)、响 应数据(response)。 一、URL & Method Rest 设计风格 》 Restful API 简单理解: URI 是用来唯一标志一个互联网资源;Me…...
QEMU源码全解析25 —— QOM介绍(14)
接前一篇文章:QEMU源码全解析24 —— QOM介绍(13) 本文内容参考: 《趣谈Linux操作系统》 —— 刘超,极客时间 《QEMU/KVM》源码解析与应用 —— 李强,机械工业出版社 特此致谢! 本文开始对于…...
TopK问题
topK问题: N个数找最大或者最小的前k个。 例子: 优质筛选(店面的排名) 10000个数,找出最大的前10个数 解决思路:建立大堆,然后pop9次 但是有些场景,上面的思路…...
接口自动化测试-Postman+Newman+Git+Jenkins实战集成(详细)
目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 1、Postman 创建…...
CMake 学习笔记 (Generator Expressions)
CMake 学习笔记 (Generator Expressions) Generator Expressions 可以认为是一种特殊的变量,它会在编译阶段求值。通常用在 target_link_libraries(), target_include_directories(), target_compile_definitions() 上。 用 Generator Expr…...
提高测试用例质量的6大注意事项
在软件测试中,经常会遇到测试用例设计不完整,用例没有完全覆盖需求等问题,这样往往容易造成测试工作效率低下,不能及时发现项目问题,无形中增加了项目风险。 因此提高测试用例质量,就显得尤为重要。一般来说…...
2023牛客暑期多校训练营6 A-Tree (kruskal重构树))
文章目录 题目大意题解参考代码 题目大意 ( 0 ≤ a i ≤ 1 ) , ( 1 ≤ c o s t i ≤ 1 0 9 ) (0\leq a_i\leq 1),(1 \leq cost_i\leq 10^9) (0≤ai≤1),(1≤costi≤109) 题解 提供一种新的算法,kruskal重构树。 该算法重新构树,按边权排序每一条边…...
软件测试—支付功能测试
有人问过我这样一个问题:作为一个支付平台,接入了快钱、易宝或直连银行等多家的渠道,内在的产品流程是自己的。业内有什么比较好的测试办法,来测试各渠道及其支持的银行通道呢? 回答:对支付平台而言&#…...
自动化测试的统筹规划
背景 回顾以前自动化测试编写的经历,主要是以开发者自驱动的方式进行,测试的编写随心而动,没有规划,也没有章法,这样就面临如下的一些问题: 测试用例设计不到位,覆盖不全,或者不够…...
外键字段的增删改查、多表查询(子查询和连表查询、正反向、聚合查询、 分组查询、 F与Q查询)、django中如何开启事务
一、 外键字段的增删改查 1.多对多的外键增删改查图书和作者是多对多,借助于第三张表实现的,如果想绑定图书和作者的关系,本质上就是在操作第三方表2.如何操作第三张表问题:让你给图书添加一个作者,他俩的关系可是多对…...
【学习笔记】生成式AI(ChatGPT原理,大型语言模型)
ChatGPT原理剖析 语言模型 文字接龙 ChatGPT在测试阶段是不联网的。 ChatGPT背后的关键技术:预训练(Pre-train) 又叫自监督式学习(Self-supervised Learning),得到的模型叫做基石模型(Founda…...
【Opencv入门到项目实战】(三):图像腐蚀与膨胀操作
文章目录 1.腐蚀操作2.膨胀操作3.开运算和闭运算4.礼帽与黑帽5.梯度运算 1.腐蚀操作 腐蚀操作是图像处理中常用的一种形态学操作,我们通常用于去除图像中的噪声、分割连通区域、减小目标物体的尺寸等。腐蚀操作的原理是,在给定的结构元素下,…...
Autosar诊断系列介绍20 - UDS应用层P2Server/P2Client等时间参数解析
本文框架 1. 前言2.几个时间参数含义2.1 P2Client与P2Server2.2 P2*Client与P2*Server2.3 P3Client_Phys与P3Client_Func2.4 S3Client与S3Server 1. 前言 本系列Autosar 诊断入门介绍,会详细介绍诊断相关基础知识,如您对诊断实战有更高需求,…...
【iOS】json数据解析以及简单的网络数据请求
文章目录 前言一、json数据解析二、简单的网络数据请求三、实现访问API得到网络数据总结 前言 近期写完了暑假最后一个任务——天气预报,在里面用到了简单的网络数据请求以及json数据的解析,特此记录博客总结 一、json数据解析 JSON是一种轻量级的数据…...
Kubernetes客户端认证—— 基于ServiceAccount的JWTToken认证
1、概述 在 Kubernetes 官方手册中给出了 “用户” 的概念,Kubernetes 集群中存在的用户包括 “普通用户” 与 “ServiceAccount”, 但是 Kubernetes 没有普通用户的管理方式,通常只是将使用集群根证书签署的有效证书的用户都被视为合法用户。…...
45.ubuntu Linux系统安装教程
目录 一、安装Vmware 二、Linux系统的安装 今天开始了新的学习,Linux,下面是今天学习的内容。 一、安装Vmware 这里是在 Vmware 虚拟机中安装 linux 系统,所以需要先安装 vmware 软件,然 后再安装 Linux 系统。 所需安装文件:…...
Google收紧分发与权限,全球监管聚焦数字生命周期
最近,Google平台治理的节奏明显加快。Google 在安卓生态中持续推进隐私保护与开发者验证的强化,而全球多国监管机构则在儿童安全、游戏停服、账号封禁与内容分级等议题上释放出更具执行力的信号。整体来看,平台透明度、分发控制、隐私权限与数…...
Freertos堆管理算法解析:如何为STM32选择最优内存方案
FreeRTOS堆管理算法深度解析:STM32工业控制项目中的内存优化实践 在工业控制领域,实时性和可靠性是系统设计的核心诉求。STM32系列微控制器凭借其优异的性能价格比,成为众多工业设备的首选平台。而FreeRTOS作为一款轻量级实时操作系统&#x…...
实战指南 | 利用FRP与TOML配置实现高效内网穿透(含反向代理优化)
1. 为什么需要内网穿透? 想象一下这个场景:你家里有一台NAS存储设备,里面存满了家人照片和工作文档;或者你在本地开发了一个网站应用,想临时分享给异地同事测试。这时候你会发现——从外部网络根本无法访问这些服务&am…...
自动控制理论(12)——控制系统校正的工程实践与优化
1. 控制系统校正的工程意义 在工业自动化领域,控制系统就像人体的神经系统,需要精确调节才能保证设备稳定运行。想象一下化工反应釜的温度控制:如果响应太慢会导致反应不充分,响应太快又可能引发剧烈振荡。这就是为什么我们需要校…...
为什么你的vLLM缓存命中率低于行业均值?27家头部AI公司缓存配置审计报告首次公开
第一章:大模型工程化缓存策略与性能优化 2026奇点智能技术大会(https://ml-summit.org) 大模型推理服务在高并发场景下面临显著的延迟与资源开销挑战,缓存机制成为工程化落地的关键杠杆。合理设计缓存层级、键空间结构及失效策略,可将重复查…...
别再只会点‘Solve’了!Ansys Workbench 2022R1静力学分析完整避坑清单与高级技巧
Ansys Workbench静力学分析进阶指南:从避坑到高效求解 在工程仿真领域,Ansys Workbench作为行业标杆工具,其静力学分析模块的深度应用往往决定了仿真结果的可靠性与工程价值。本文针对已掌握基础操作但面临复杂工况挑战的工程师,系…...
ComfyUI ControlNet预处理器完整指南:5步掌握AI图像精准控制
ComfyUI ControlNet预处理器完整指南:5步掌握AI图像精准控制 【免费下载链接】comfyui_controlnet_aux ComfyUIs ControlNet Auxiliary Preprocessors 项目地址: https://gitcode.com/gh_mirrors/co/comfyui_controlnet_aux 想要在AI图像生成中获得更精准的控…...
Clockwork for Dynamo:建筑信息模型自动化技术栈的转型引擎
Clockwork for Dynamo:建筑信息模型自动化技术栈的转型引擎 【免费下载链接】ClockworkForDynamo A collection of 450 custom nodes for the Dynamo visual programming environment 项目地址: https://gitcode.com/gh_mirrors/cl/ClockworkForDynamo 在建筑…...
cmake之旅(12)
cmake之旅(12)cmake之旅(12):CPack 打包与发布1 CPack 是什么2 最简单的 CPack 配置3 配置 CPack3.1 基本信息3.2 选择打包格式4 生成 DEB 包5 生成 RPM 包6 完整示例7 组件化打包8 source 包9 本篇命令速查表10 总结与…...
深度掌握FanControl:Windows风扇控制的终极解决方案
深度掌握FanControl:Windows风扇控制的终极解决方案 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Trending/fa/F…...
