react-router v6版本使用记录

news2025/1/22 9:26:55

1:首先安装依赖

最基本的使用,引入相关依赖,开箱即用


import { BrowserRouter, Link, Routes, Route } from "react-router-dom"
import Home from "./home"
import About from "./about"

function App () {
  // BrowserRouter:包裹最外层组件,声明当前要用一个非hash模式的路由
  // link指定跳转的组件,to用来配置路由地址
  // Routes:路由出口,路由地址对应的组件会在这里进项如安然
  // Route:通过element来指定当前路由地址渲染哪个组件,path是路径
  return (
    <div>
      <BrowserRouter>
        <Link to='/'>首页</Link>
        <Link to='/about'>关于</Link>
        <Routes>
          <Route path='/' element={<Home />}></Route>
          <Route path='about' element={<About />}></Route>
        </Routes>
      </BrowserRouter>
    </div>

  )
}
export default App

注意:BrowserRouter指定路由是history模式,而HashRouter可指定路由模式是哈希模式,哈希模式路径会出现#

这是history模式

 哈希模式如下

 

 通过编程方式进行路由跳转,也就是useNavigate跳转

 这里注意,如果navigate后面加了replace:true,则路由跳转以后,点击箭头返回则不会返回上一级路由

 二:路由如何传递参数

 第一种:通过searchParams方法传参

跳转路由about组件接收参数 

 第二种:通过params方式传参,通过这种方式跟第一种相比,麻烦的地方在于路由配置那里也要做出相应的调整,即参数作为path的一部分

接着跳转传参

 最后跳转路由组件通过useParams接收参数

三:关于二级路由嵌套以及如何设置默认路由

我们这里是举例从登陆页面,跳转到主页面,在主页面有菜单,点击菜单可看到对应的内容

在app.js里进行路由配置,默认二级路由的话就是把路由配置里path属性去掉,加上index属性

 主页,也就是home组件里,是显示二级路由的组件,需要加上路由出口组件<Outlet />

 最后看下页面展示

登录页面

点击登录页面跳转页面

 配置404页面,是将path设为*即可

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

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

相关文章

MapBox历史轨迹

成果实例 思路 思路就是取从起点开始一路setdata吧 分三个图层&#xff0c;一个路径图层&#xff0c;一个飞机图层&#xff0c;一个显示名字的图层&#xff0c;遍历路径图层的点&#xff0c;经过显示名字图层的时候就显示图层&#xff0c;飞机图层的点和角度动态计算&#xff…

COMSOL电磁仿真-网格剖分-边界层

COMSOL电磁仿真-网格剖分-边界层 在低频磁场中&#xff0c;随着磁场的频率增加&#xff0c;金属的集肤效应会逐渐显著&#xff0c;为了解析趋肤层&#xff0c;需要对金属的表面进行网格加密&#xff0c;这一过程主要通过剖分边界层实现&#xff0c;本文分为两部分&#xff0c;第…

【LeetCode】337.打家劫舍Ⅲ

题目 小偷又发现了一个新的可行窃的地区。这个地区只有一个入口&#xff0c;我们称之为 root 。 除了 root 之外&#xff0c;每栋房子有且只有一个“父“房子与之相连。一番侦察之后&#xff0c;聪明的小偷意识到“这个地方的所有房屋的排列类似于一棵二叉树”。 如果 两个直…

2023年软件测试岗面试题+答案汇总,也许你例offer就差这一个...

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

16.5.4 【Linux】SELinux 政策内的规则管理

SELinux 各个规则的布林值查询 getsebool 如果想要查询系统上面全部规则的启动与否 &#xff08;on/off&#xff0c;亦即布林值&#xff09;&#xff0c;很简单的通过 sestatus-b 或 getsebool -a 均可&#xff01; SELinux 各个规则规范的主体程序能够读取的文件 SELinux typ…

flex布局 vs grid布局

问题&#xff1a;一行最多显示3个item&#xff0c;实现最后一行居左 <div class"chart-wrap"><div class"chart-item">图</div><div class"chart-item">图</div><div class"chart-item">图</…

医生如何使用ChatGPT提高工作效率

文章目录 引言案例一&#xff1a;快速获取医学知识案例二&#xff1a;协助患者自我诊断案例三&#xff1a;辅助临床决策案例四&#xff1a;提供在线咨询服务案例五&#xff1a;用病人易于理解的语言总结关键的临床信息案例六&#xff1a;高效整理医疗文件案例七&#xff1a;根据…

报修管理系统的功能有多强大?的修报修管理系统有什么优势?

报修管理系统是一种功能强大的系统&#xff0c;可帮助企业快速响应设备故障和异常情况&#xff0c;并将实时信息反馈给有关人员&#xff0c;以及进行准确的统计分析。通过使用报修管理系统&#xff0c;企业能够极大地提升工作效率&#xff0c;优化运营流程&#xff0c;减少人员…

记一次文件因content-type问题无法打开的经历

记一次文件因content-type问题无法打开的经历 引场景方案Jsoup的Content-Typesimplemagicfile cant open流不可重复消费问题Tika 总结 引 在Http请求头和响应头都有这个attribute&#xff0c;来声明请求和响应报文的资源类型。 Content-Type&#xff08;MediaType&#xff09;…

你真的了解数据结构与算法吗?

数据结构与算法&#xff0c;是理论和实践必须紧密结合的一门学科&#xff0c;有关数据结构和算法同类的课程或书籍&#xff0c;有些只是名为“数据结构”&#xff0c;而非“数据结构与算法”&#xff0c;它们在内容上并无很大区别。 实际上&#xff0c;数据结构和算法&#xf…

有哪些前端开发工具推荐? - 易智编译EaseEditing

在前端开发中&#xff0c;有许多工具可以帮助你更高效地进行开发、调试和优化。以下是一些常用的前端开发工具推荐&#xff1a; 代码编辑器/集成开发环境&#xff08;IDE&#xff09;&#xff1a; Visual Studio Code&#xff1a;功能强大、轻量级的代码编辑器&#xff0c;支…

富士胶片 : 柯达倒下了,我们凭什么屹立不倒

当整个行业被新技术颠覆后&#xff0c;其中的领军企业如何才能活下去? 富士胶片在面临行业被颠覆的情况下&#xff0c;迅速调整策略&#xff0c;果断裁减传统业务、大规模投资新兴领域&#xff0c;体现出敏捷的链节竞争优势。这使得富士胶片在数码时代来临之际&#xff0c;能…

MATLAB高分辨率图片

把背景调黑&#xff0c;把曲线调黄&#xff0c;把grid调白&#xff0c;调调字体字号的操作 close all a0:0.1:10; noise2*rand(1,length(a)); bsin(a)sin(3*a)noise;plot(a,b,y,linewidth,2); ylim([-3 4]) %y轴范围 set(gca,xgrid,on,ygrid,on,gridlinestyle,-,Grid…

01.在实战中提升自己----表达式解析

1.我们面临的问题与挑战 我的工作成功就是交付可用产品&#xff0c;而且是要满足超大规模企业应用的产品。在实践过程中&#xff0c;不管我们是处于哪个阶段&#xff0c;交付的内容就是会大规模应用的工具。在我们的面前&#xff0c;要不提供完善的支持配套&#xff0c;要不投…

云安全攻防(十二)之 手动搭建 K8S 环境搭建

手动搭建 K8S 环境搭建 首先前期我们准备好三台 Centos7 机器&#xff0c;配置如下&#xff1a; 主机名IP系统版本k8s-master192.168.41.141Centos7k8s-node1192.168.41.142Centos7k8s-node2192.168.41.143Centos7 前期准备 首先在三台机器上都执行如下的命令 # 关闭防火墙…

H3C QoS打标签和限速配置案例

EF&#xff1a;快速转发 AF&#xff1a;确保转发 CS&#xff1a;给各种协议用的 BE&#xff1a;默认标记(尽力而为) VSR-88-2 出口路由配置&#xff1a; [H3C]dis current-configuration version 7.1.075, ESS 8305 vlan 1 traffic classifier vlan10 operator and if-match a…

车规级半导体分类(汽车芯片介绍)

车规级半导体&#xff0c;也被称为“汽车芯片”&#xff0c;主要应用于车辆控制装置、车载监控系统和车载电子控制装置等领域。这些半导体器件主要分布在车体控制模块上&#xff0c;以及车载信息娱乐系统方面&#xff0c;包括动力传动综合控制系统、主动安全系统和高级辅助驾驶…

Centos7安装docker后默认开启docker0的网卡|卸载默认网卡

一&#xff1a; 停掉服务 systemctl stop docker [rootwww ~]# systemctl stop docker [rootwww ~]# systemctl status docker ● docker.service - Docker Application Container Engine Loaded: loaded (/usr/lib/systemd/system/docker.service; enabled; vendor prese…

总结 TCP 协议的相关特性

TCP协议段格式: 如图, 端口号: 是其中一个重要的部分,知道端口号才能确认数据交给哪个应用程序(端口号属于传输层的概念). 4位首部长度:4bit表示的范围是0->15,在此处,单位是"4字节",因此,将这里的数值 * 4&#xff0c;才是真正的报头长度,即TCP 报头最大长度,60…

CentOS系统环境搭建(十二)——CentOS7安装Elasticsearch

centos系统环境搭建专栏&#x1f517;点击跳转 CentOS 7.9 安装 Elasticsearch 7.17.12 文章目录 CentOS 7.9 安装 Elasticsearch 7.17.121.下载2.上传3.解压4.调整es占用内存5.修改elasticsearch配置文件6.创建用户7.Elasticsearch 后台启动与关闭 1.下载 &#x1f517;http…