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

React ~ React Router 6

React Router 6 VS React Router 5.x

  1. 内置组件的变化; 移除<Switch /> , 新增<Routes />
  2. 语法的变化; component = { About } 变为 element = { <About /> }
  3. 新增多个hook
  4. 官方明确推荐函数式组件了!

一级路由(变化)

  1. 安装路由 npm i react-router-dom (默认是最新版本)
  2. 路由链接用NavLink(高亮)来导航, 并通过to属性来进行跳转操作
  3. 呈现路由的时候,需要注册路由 实用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.前言 学习资料&#xff1a;江协科技的个人空间-江协科技个人主页-哔哩哔哩视频 通信的目的&#xff1a;将一个设备的数据传送到另一个设备&#xff0c;扩展硬件系统通信协议&#xff1a;制定通信的规则&#xff0c;通信双方按照协议规则进行数据收发 全双工&#xff1a;通信…...

第一章-JavaScript基础进阶part2:事件

文章目录 概念一、注册事件&#xff08;绑定事件&#xff09;1.1 addEventListener事件监听 二、删除事件&#xff08;解绑&#xff09;三、DOM事件流四、事件对象event4.1 e.target与this与e.currentTarget的区别4.2 事件对象的常见属性 五、阻止事件默认行为及冒泡六、事件委…...

如何优雅的使用后端接口

优雅的后端接口 一个后端接口大致分为四个部分&#xff1a;接口地址(url)、接口请求方式(get、post等)、请求数据(request)、响 应数据(response)。 一、URL & Method Rest 设计风格 》 Restful API 简单理解&#xff1a; URI 是用来唯一标志一个互联网资源&#xff1b;Me…...

QEMU源码全解析25 —— QOM介绍(14)

接前一篇文章&#xff1a;QEMU源码全解析24 —— QOM介绍&#xff08;13&#xff09; 本文内容参考&#xff1a; 《趣谈Linux操作系统》 —— 刘超&#xff0c;极客时间 《QEMU/KVM》源码解析与应用 —— 李强&#xff0c;机械工业出版社 特此致谢&#xff01; 本文开始对于…...

TopK问题

topK问题&#xff1a; N个数找最大或者最小的前k个。 例子&#xff1a; 优质筛选&#xff08;店面的排名&#xff09; 10000个数&#xff0c;找出最大的前10个数 解决思路&#xff1a;建立大堆&#xff0c;然后pop9次 但是有些场景&#xff0c;上面的思路…...

接口自动化测试-Postman+Newman+Git+Jenkins实战集成(详细)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、Postman 创建…...

CMake 学习笔记 (Generator Expressions)

CMake 学习笔记 &#xff08;Generator Expressions&#xff09; Generator Expressions 可以认为是一种特殊的变量&#xff0c;它会在编译阶段求值。通常用在 target_link_libraries(), target_include_directories(), target_compile_definitions() 上。 用 Generator Expr…...

提高测试用例质量的6大注意事项

在软件测试中&#xff0c;经常会遇到测试用例设计不完整&#xff0c;用例没有完全覆盖需求等问题&#xff0c;这样往往容易造成测试工作效率低下&#xff0c;不能及时发现项目问题&#xff0c;无形中增加了项目风险。 因此提高测试用例质量&#xff0c;就显得尤为重要。一般来说…...

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) 题解 提供一种新的算法&#xff0c;kruskal重构树。 该算法重新构树&#xff0c;按边权排序每一条边…...

软件测试—支付功能测试

有人问过我这样一个问题&#xff1a;作为一个支付平台&#xff0c;接入了快钱、易宝或直连银行等多家的渠道&#xff0c;内在的产品流程是自己的。业内有什么比较好的测试办法&#xff0c;来测试各渠道及其支持的银行通道呢&#xff1f; 回答&#xff1a;对支付平台而言&#…...

自动化测试的统筹规划

背景 回顾以前自动化测试编写的经历&#xff0c;主要是以开发者自驱动的方式进行&#xff0c;测试的编写随心而动&#xff0c;没有规划&#xff0c;也没有章法&#xff0c;这样就面临如下的一些问题&#xff1a; 测试用例设计不到位&#xff0c;覆盖不全&#xff0c;或者不够…...

外键字段的增删改查、多表查询(子查询和连表查询、正反向、聚合查询、 分组查询、 F与Q查询)、django中如何开启事务

一、 外键字段的增删改查 1.多对多的外键增删改查图书和作者是多对多&#xff0c;借助于第三张表实现的&#xff0c;如果想绑定图书和作者的关系&#xff0c;本质上就是在操作第三方表2.如何操作第三张表问题&#xff1a;让你给图书添加一个作者&#xff0c;他俩的关系可是多对…...

【学习笔记】生成式AI(ChatGPT原理,大型语言模型)

ChatGPT原理剖析 语言模型 文字接龙 ChatGPT在测试阶段是不联网的。 ChatGPT背后的关键技术&#xff1a;预训练&#xff08;Pre-train&#xff09; 又叫自监督式学习&#xff08;Self-supervised Learning&#xff09;&#xff0c;得到的模型叫做基石模型&#xff08;Founda…...

【Opencv入门到项目实战】(三):图像腐蚀与膨胀操作

文章目录 1.腐蚀操作2.膨胀操作3.开运算和闭运算4.礼帽与黑帽5.梯度运算 1.腐蚀操作 腐蚀操作是图像处理中常用的一种形态学操作&#xff0c;我们通常用于去除图像中的噪声、分割连通区域、减小目标物体的尺寸等。腐蚀操作的原理是&#xff0c;在给定的结构元素下&#xff0c;…...

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 诊断入门介绍&#xff0c;会详细介绍诊断相关基础知识&#xff0c;如您对诊断实战有更高需求&#xff0c;…...

【iOS】json数据解析以及简单的网络数据请求

文章目录 前言一、json数据解析二、简单的网络数据请求三、实现访问API得到网络数据总结 前言 近期写完了暑假最后一个任务——天气预报&#xff0c;在里面用到了简单的网络数据请求以及json数据的解析&#xff0c;特此记录博客总结 一、json数据解析 JSON是一种轻量级的数据…...

Kubernetes客户端认证—— 基于ServiceAccount的JWTToken认证

1、概述 在 Kubernetes 官方手册中给出了 “用户” 的概念&#xff0c;Kubernetes 集群中存在的用户包括 “普通用户” 与 “ServiceAccount”&#xff0c; 但是 Kubernetes 没有普通用户的管理方式&#xff0c;通常只是将使用集群根证书签署的有效证书的用户都被视为合法用户。…...

45.ubuntu Linux系统安装教程

目录 一、安装Vmware 二、Linux系统的安装 今天开始了新的学习&#xff0c;Linux,下面是今天学习的内容。 一、安装Vmware 这里是在 Vmware 虚拟机中安装 linux 系统&#xff0c;所以需要先安装 vmware 软件&#xff0c;然 后再安装 Linux 系统。 所需安装文件&#xff1a;…...

打字不如说话,说话不如截图——AI 代码助手的多模态输入实践兑

整体排查思路 我们的目标是验证以下三个环节是否正常&#xff1a; 登录成功时&#xff1a;服务器是否正确生成了Session并返回了包含正确 JSESSIONID的Cookie给浏览器。 浏览器端&#xff1a;浏览器是否成功接收并存储了该Cookie。 后续请求&#xff1a;浏览器在执行查询等操作…...

lvgl-micropython、lv_micropython和lv_binding_micropython到底啥关系?一文读懂抵

一、背景与问题缘起 MySQL 5.6.51 版本下 2000 万行核心业务表开展新增字段操作&#xff0c;需求为新增BIGINT(19) NOT NULL DEFAULT 0 COMMENT 注释&#xff08;因业务实际需要存储大数值关联字段&#xff09;。 表的核心特性为Java 多线程密集读写&#xff0c;业务请求持续高…...

AzurLaneAutoScript:碧蓝航线自动化脚本终极指南 - 如何实现全自动委托科研与大世界探索

AzurLaneAutoScript&#xff1a;碧蓝航线自动化脚本终极指南 - 如何实现全自动委托科研与大世界探索 【免费下载链接】AzurLaneAutoScript Azur Lane bot (CN/EN/JP/TW) 碧蓝航线脚本 | 无缝委托科研&#xff0c;全自动大世界 项目地址: https://gitcode.com/gh_mirrors/az/A…...

数字电源开发第一步:手把手教你搞定MPLAB X IDE和XC-16编译器的安装(Win/Linux双平台)

数字电源开发环境搭建实战&#xff1a;MPLAB X IDE与XC-16编译器全平台配置指南 在数字电源设计领域&#xff0c;Microchip的dsPIC33系列单片机凭借其高性能数字信号控制器(DSC)架构和丰富的外设资源&#xff0c;已成为工程师们的首选方案之一。然而&#xff0c;对于刚接触这一…...

STM32开发者必看:Openocd烧录全流程详解(附Keil生成bin文件技巧)

STM32开发者必看&#xff1a;Openocd烧录全流程详解&#xff08;附Keil生成bin文件技巧&#xff09; 在嵌入式开发领域&#xff0c;STM32系列微控制器因其出色的性能和丰富的生态而广受欢迎。对于开发者而言&#xff0c;掌握高效可靠的烧录工具是提升开发效率的关键一环。Openo…...

基于Python的考试系统毕业设计

博主介绍&#xff1a;✌ 专注于Java,python,✌关注✌私信我✌具体的问题&#xff0c;我会尽力帮助你。 一、研究目的 本研究旨在设计并实现一个基于Python的考试系统&#xff0c;以满足现代教育环境中对在线考试系统的需求。该系统旨在提供一种高效、安全、便捷的考试环境&am…...

FUTURE POLICE语音模型企业级架构设计:高可用与弹性伸缩方案

FUTURE POLICE语音模型企业级架构设计&#xff1a;高可用与弹性伸缩方案 最近和几个做智能客服和有声书的朋友聊天&#xff0c;大家普遍有个头疼的问题&#xff1a;语音合成服务一到业务高峰期就容易卡顿&#xff0c;甚至直接挂掉。平时用着还行&#xff0c;一到促销活动或者内…...

5分钟掌握英雄联盟LCU智能助手:数据驱动游戏水平提升的完整指南

5分钟掌握英雄联盟LCU智能助手&#xff1a;数据驱动游戏水平提升的完整指南 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power &#x1f680;. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 你是否在英雄联盟中…...

收藏!小白程序员必看:如何低成本精准选型大模型,避免花冤枉钱?

选择大模型的关键在于匹配自身需求&#xff0c;需结合成本预算、技术能力、业务场景、合规要求四大维度进行筛选。文章提出先明确核心需求&#xff0c;拒绝参数崇拜&#xff0c;再根据个人开发者、小团队、垂直领域用户等不同类型给出具体选型建议。同时&#xff0c;文章还提醒…...

避坑指南:Ascend 310芯片+CANN工具包在麒麟系统下的5个常见安装错误

Ascend 310芯片CANN工具包在麒麟系统下的5个典型安装陷阱与解决方案 当Ascend 310芯片遇上麒麟操作系统&#xff0c;这种国产硬件的黄金组合本应带来无缝的开发体验&#xff0c;但实际部署中总有几个"暗礁"让开发者措手不及。不同于常规安装教程&#xff0c;本文将直…...