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

react-03-react-router-dom-路由

react-router-dom:react路由

印记中文:react-router-dom

1、路由原理

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>前端路由的基石_history</title>
</head>
<body><a href="http://www.atguigu.com" onclick="return push('/test1') ">push test1</a><br><br><button onClick="push('/test2')">push test2</button><br><br><button onClick="replace('/test3')">replace test3</button><br><br><button onClick="back()"><= 回退</button><button onClick="forword()">前进 =></button><script type="text/javascript" src="https://cdn.bootcss.com/history/4.7.2/history.js"></script><script type="text/javascript">// let history = History.createBrowserHistory() //方法一,直接使用H5推出的history身上的APIlet history = History.createHashHistory() //方法二,hash值(锚点)function push (path) {history.push(path)return false}function replace (path) {history.replace(path)}function back() {history.goBack()}function forword() {history.goForward()}history.listen((location) => {console.log('请求路由路径变化了', location)})</script>
</body>
</html>
<div className="col-xs-2 col-xs-offset-2"><div className="list-group">{/* 原生html中,靠<a>跳转不同的页面 */}{/* <a className="list-group-item" href="./about.html">About</a><a className="list-group-item active" href="./home.html">Home</a> */}{/* 在React中靠路由链接实现切换组件--编写路由链接 */}<NavLink activeClassName="atguigu" className="list-group-item" to="/about">About</NavLink><NavLink activeClassName="atguigu" className="list-group-item" to="/home">Home</NavLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body">{/* 注册路由 */}<Route path="/about" component={About}/><Route path="/home" component={Home}/></div></div></div>

2、路由组件与一般组件

1.写法不同:

一般组件:

路由组件:

2.存放位置不同:

一般组件:components

路由组件:pages

3.接收到的props不同:

一般组件:写组件标签时传递了什么,就能收到什么

路由组件:接收到三个固定的属性

history:go: ƒ go(n)goBack: ƒ goBack()goForward: ƒ goForward()push: ƒ push(path, state)replace: ƒ replace(path, state)
location:pathname: "/about"search: ""state: undefinedmatch:params: {}path: "/about"url: "/about"

3、NavLink

可以实现路由链接的高亮,通过activeClassName指定样式名

4、Switch的使用

1.通常情况下,path和component是一一对应的关系。

2.Switch可以提高路由匹配效率(单一匹配)。

import {Route,Switch} from 'react-router-dom'
{/* 注册路由 */}<Switch><Route path="/about" component={About}/><Route path="/home" component={Home}/><Route path="/home" component={Test}/></Switch>

5、解决多级路径刷新页面样式丢失的问题

1.public/index.html 中 引入样式时不写 ./ 写 / (常用)

2.public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% (常用)

3.使用HashRouter

6、路由的严格匹配与模糊匹配

1.默认使用的是模糊匹配(简单记:【输入的路径】必须包含要【匹配的路径】,且顺序要一致)

2.开启严格匹配:

3.严格匹配不要随便开启,需要再开,有些时候开启会导致无法继续匹配二级路由

7、Redirect的使用

1.一般写在所有路由注册的最下方,当所有路由都无法匹配时,跳转到Redirect指定的路由

2.具体编码:

8、传递路由参数参数

1.params参数

路由链接(携带参数):<Link to=‘/demo/test/tom/18’}>详情

注册路由(声明接收):

接收参数:this.props.match.params

2.search参数

路由链接(携带参数):<Link to=‘/demo/test?name=tom&age=18’}>详情

注册路由(无需声明,正常注册即可):

接收参数:this.props.location.search

备注:获取到的search是urlencoded编码字符串,需要借助querystring解析

3.state参数

路由链接(携带参数):<Link to={{pathname:‘/demo/test’,state:{name:‘tom’,age:18}}}>详情

注册路由(无需声明,正常注册即可):

接收参数:this.props.location.state

备注:刷新也可以保留住参数,不会展示在地址栏中,由于使用的是brotherroute,一直在维护history对象身上维护

 <div><ul>{messageArr.map((msgObj)=>{return (<li key={msgObj.id}>{/* 向路由组件传递params参数 */}{/* <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link> */}{/* 向路由组件传递search参数 */}{/* <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link> */}{/* 向路由组件传递state参数 */}<Link to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link></li>)})}</ul><hr/>{/* 声明接收params参数 */}{/* <Route path="/home/message/detail/:id/:title" component={Detail}/> */}{/* search参数无需声明接收,正常注册路由即可 */}{/* <Route path="/home/message/detail" component={Detail}/> */}{/* state参数无需声明接收,正常注册路由即可 */}<Route path="/home/message/detail" component={Detail}/>
 // 接受params参数// const {id,title} = this.props.match.params// 接受search参数// const { search } = this.props.location //此处是?/xx=xx&yy=yy 所以需要整理成对象// const { id, title } = qs.parse(search.slice(1))//接受state参数const {id,title} = this.props.location.state

9、编程式路由导航

借助this.prosp.history对象上的API对操作路由跳转、前进、后退

-this.prosp.history.push()

-this.prosp.history.replace()

-this.prosp.history.goBack()

-this.prosp.history.goForward()

-this.prosp.history.go()

//replace跳转+携带params参数
//this.props.history.replace(`/home/message/detail/${id}/${title}`)//replace跳转+携带search参数
// this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)//replace跳转+携带state参数
this.props.history.replace(`/home/message/detail`,{id,title})//push跳转+携带params参数
// this.props.history.push(`/home/message/detail/${id}/${title}`)//push跳转+携带search参数
// this.props.history.push(`/home/message/detail?id=${id}&title=${title}`)//push跳转+携带state参数
this.props.history.push(`/home/message/detail`,{id,title})back = ()=>{this.props.history.goBack()}forward = ()=>{this.props.history.goForward()}go = ()=>{this.props.history.go(-2)}

10、BrowserRouter与HashRouter的区别

1.底层原理不一样:

BrowserRouter使用的是H5的history API,不兼容IE9及以下版本。

HashRouter使用的是URL的哈希值。

2.path表现形式不一样

BrowserRouter的路径中没有#,例如:localhost:3000/demo/test

HashRouter的路径包含#,例如:localhost:3000/#/demo/test

3.刷新后对路由state参数的影响

(1).BrowserRouter没有任何影响,因为state保存在history对象中。

(2).HashRouter刷新后会导致路由state参数的丢失!!!

4.备注:HashRouter可以用于解决一些路径错误相关的问题。

11、withRouter

//withRouter可以加工一般组件,让一般组件具备路由组件所特有的API//withRouter的返回值是一个新组件import {withRouter} from 'react-router-dom'export default withRouter(Header)

相关文章:

react-03-react-router-dom-路由

react-router-dom:react路由 印记中文:react-router-dom 1、路由原理 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>前端路由的基石_history</title> </head> <body><a hre…...

2自由度悬架LQR控制

目录 1 悬架系统 1.1 悬架结构示意图 1.2 悬架数学模型 1.3 路面激励 2.仿真分析 2.1simulink模型 2.2 仿真结果 2.3 结论 3. 总结 1 悬架系统 1.1 悬架结构示意图 1.2 悬架数学模型 其中&#xff1a;x1为悬架动扰度&#xff0c;x2为车身加速度&#xff0c;x3为轮胎…...

C语言返回类型为指针的一些经典题目(下)

续上一篇文章&#xff0c;上一篇文章题目都很经典&#xff0c;这一篇也不例外。一.返回类型为指针经典题目(下)1.代码(第六题)char *GetMemory3(int num) {char *p (char *)malloc(sizeof(char) * num);return p; } void Test3(void) {char *str NULL;str GetMemory3(100…...

OpenAI 官方api 阅读笔记

网站 API Key concepts Prompts and completions You input some text as a prompt, and the model will generate a text completion that attempts to match whatever context or pattern you gave it. Token  模型通过将文本分解成token来理解和处理, 处理token数量取…...

微服务项目【分布式锁】

创建Redisson模块 第1步&#xff1a;基于Spring Initialzr方式创建zmall-redisson模块 第2步&#xff1a;在zmall-redisson模块中添加相关依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</a…...

JavaWeb5-线程常用属性

目录 1.ID 2.名称 3.状态 4.优先级 5.是否守护线程 5.1.线程类型&#xff1a; ①用户线程&#xff08;main线程默认是用户线程&#xff09; ②守护线程&#xff08;后台/系统线程&#xff09; 5.2.守护线程作用 5.3.守护线程应用 5.4.守护线程使用 ①在用户线程&am…...

JVM调优及垃圾回收GC

一、说一说JVM的内存模型。JVM的运行时内存也叫做JVM堆&#xff0c;从GC的角度可以将JVM分为新生代、老年代和永久代。其中新生代默认占1/3堆内存空间&#xff0c;老年代默认占2/3堆内存空间&#xff0c;永久代占非常少的对内存空间。新生代又分为Eden区、SurvivorFrom区和Surv…...

JAVA练习53-打乱数组

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、题目-打乱数组 1.题目描述 2.思路与代码 2.1 思路 2.2 代码 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 2月17日练习内…...

基于RK3588的嵌入式linux系统开发(三)——Uboot镜像文件合成

本章uboot镜像文件的合成包括官网必备文件rkbin下载和uboot镜像文件合成两部分内容&#xff0c;具体分别如下所述。 &#xff08;一&#xff09;下载rkbin文件包 以上uboot编译生成的uboot镜像不能直接烧录到板卡中运行&#xff0c;需要与atf、bl31、ddr配置文件等必备文件合成…...

wireshark抓包后通过工具分包

分包说明&#xff1a;关于现场问题分析&#xff0c;一般都是通过日志&#xff0c;这个属于程序中加的打印&#xff0c;或存数据库&#xff0c;或者存文本形式&#xff0c;这种一般比较符合程序逻辑&#xff1b;还有一种就是涉及到网络通信方面的&#xff0c;需要通过抓包来分析…...

举个栗子~Tableau 技巧(251):统一多个工作表的坐标轴范围

在工作汇报场景&#xff0c;有一个很常见、很多数据粉反馈的需求&#xff1a;同一看板上的两个图表&#xff0c;因为轴范围不一致&#xff08;如下图&#xff09;&#xff0c;很难直观比较。有什么办法可以统一它们的坐标轴范围呢&#xff1f; 类似需求&#xff0c;不论两个还是…...

Centos7 调整磁盘空间

1. 查看磁盘空间占用情况&#xff1a; df -h 可以看到 /home 有很多剩余空间,占了绝大部分&#xff0c; 而我又很少把文件放在home下。 2. 备份 /home 下的内容&#xff1a; cp -r /home/ /homebak/ 3. 关闭home进程&#xff1a; fuser -m -v -i -k /home 报错: -bash: fuser…...

小菜版考试系统——“C”

各位CSDN的uu们你们好呀&#xff0c;今天&#xff0c;小雅兰的内容是小菜版考试系统&#xff0c;最近一直在忙C语言课程设计的事&#xff0c;那么&#xff0c;就请uu们看看我的学习成果吧。 课程设计任务 摘要 题目分析 流程图 关键程序代码 程序运行结果 结论与心得 参…...

Twitter被封号了?最详细的申诉教程在此

由于Twitter检测系统是十分敏感的&#xff0c;所以在运营的时候很容易莫名就出现“此账号被封禁”或者“此账号被冻结”的情况。出现这种情况大多是因为账号发送了垃圾信息、面临安全风险、发太多广告或者太久没上线被判为机器人这几个原因。被封号后&#xff0c;我们可以通过向…...

Docker 安装配置

本章背景知识 本章主要介绍在 Centos 操作系统平台上进行安装和配置Docker Engine。 环境准备 1、操作系统支持。 CentOS、Debian、Fedora、Raspbian、RHEL、SLES、Ubuntu、Binaries 2、启用yum 软件仓库源。 centos-extras 编者注&#xff1a;Centos 默认已经开启cento…...

死锁检测组件-设想

死锁检测组件-设想 现在有三个临界资源和三把锁绑定了&#xff0c;三把锁又分别被三个线程占用。&#xff08;不用关注临界资源&#xff0c;因为锁和临界资源是绑定的&#xff09; 但现在出现这种情况&#xff1a;线程1去申请获取锁2&#xff0c;线程2申请获取锁3&#xff0c;…...

线程池的使用

为什么要使用线程池 复习一下创建线程的几种方式&#xff1a; 继承Thread 实现Runnable 实现Callable 但是如果频繁的创建/销毁线程&#xff0c;就会造成资源浪费。这时候就需要将线程创建好之后存起来&#xff0c;以后要用取出来&#xff0c;用完后再放回去。 注意 &#xff…...

字节码指令

目录 2.1 入门 2.2 javap 工具 2.3 图解方法执行流程 1&#xff09;原始 java 代码 2&#xff09;编译后的字节码文件 3&#xff09;常量池载入运行时常量池 4&#xff09;方法字节码载入方法区 5&#xff09;main 线程开始运行&#xff0c;分配栈帧内存 6&#xff09;…...

TLS/SSL证书彻底扫盲

证书格式 pem Privacy Enhanced Mail文本格式&#xff0c;以 -----BEGIN CERTIFICATE----- 开头&#xff0c;以-----END CERTIFICATE-----结尾 der 二进制格式&#xff0c;只保存证书&#xff0c;不保存私钥java和window服务器常见 pfx/p12 Predecessor of PKCS#12二进制格式&…...

WGCNA | 值得你深入学习的生信分析方法!~(网状分析-第五步-高级可视化)

1写在前面 前面我们用WGCNA分析完成了一系列的分析&#xff0c;聚类分割模块。&#x1f970; 随后进一步筛选&#xff0c;找到与我们感兴趣的表型或者临床特征相关的模块&#xff0c;而且进行了模块内部分析。&#x1f618; 再然后是对感兴趣模块进行功能注释&#xff0c;了解模…...

try catch finally执行顺序

try catch finally&#xff0c;try里有return&#xff0c;finally还执行么&#xff1f;答案&#xff1a; 执行&#xff0c;并且返回return时&#xff0c;finally的执行早于try。try-catch-finally的执行顺序无return当try中的t()没有抛出异常public static void main(String[] …...

2023年数学建模美赛D题(Prioritizing the UN Sustainability Goals)分析与编程

2023年数学建模美赛D题分析建模与编程 重要说明&#xff1a; 本文介绍2023年美赛题目&#xff0c;并进行简单分析&#xff1b;本文首先对 D题进行深入分析&#xff0c;其它题目分析详见专题讨论&#xff1b;本文及专题分析将在 2月17日每3小时更新一次&#xff0c;完全免费&am…...

35岁测试工程师被辞退,给你们一个忠告

一&#xff1a;前言&#xff1a;人生的十字路口静坐反思 入软件测试这一行至今已经10年多&#xff0c;承蒙领导们的照顾与重用&#xff0c;同事的支持与信任&#xff0c;我的职业发展算是相对较好&#xff0c;从入行到各类测试技术岗位&#xff0c;再到测试总监&#xff0c;再转…...

华为OD机试题 - 租车骑绿岛(JavaScript)

最近更新的博客 2023新华为OD机试题 - 斗地主(JavaScript)2023新华为OD机试题 - 箱子之形摆放(JavaScript)2023新华为OD机试题 - 考古学家(JavaScript)2023新华为OD机试题 - 相同数字的积木游戏 1(JavaScript)2023新华为OD机试题 - 最多等和不相交连续子序列(JavaScri…...

Linux下Python脚本的编写解析fio(minimal格式)(三)

在服务器测试(storage)过程中&#xff0c;会看到很多人写跑fio的脚本用minimal格式来解析&#xff0c;因为这种格式返回的结果对与脚本(shell,python)解析log非常方便.下面介绍一下这种方式下,用Python来解析log 1 一般客户会要求结果中出现一下参数的值&#xff1a; bandwidth…...

【实战场景二】如何设计一个分布式锁?

如何优雅的设计一个分布式锁&#xff1f;如何设计一个分布式锁&#xff1f;1、什么是分布式锁2、那么分布式锁&#xff0c;具备什么条件呢&#xff1f;3、设计分布式锁有哪些方式&#xff1f;3.1 利用redis实现分布式锁原理3.2 基于数据库做分布式锁3.3 基于zookeeper实现分布式…...

Java中ThreadLocal类详解

ThreadLocal从名字上我们看出&#xff0c;它叫做本地线程变量&#xff0c;每个线程都有各自的的变量&#xff0c;而不再是我们之前的两个线程共用同一个变量&#xff1b;以这个类创建的变量&#xff0c;在多个线程都用到这个变量时&#xff0c;可以为每一个线程创建一个变量副本…...

从一致性角度考虑推荐冷启动长尾推荐问题(一)

前言&#xff1a;目前中长尾推荐的方法有很多&#xff0c;主流的方法有几类比如:1)在没有项目ID嵌入的情况下提高推荐模型的鲁棒性&#xff0c;2)利用有限的交互数据提高学习效率&#xff0c;如使用元学习方法;3)利用物品侧面信息&#xff0c;便于物品ID嵌入的初始化&#xff0…...

电脑(Windows)常用快捷键

简述&#xff1a;实用的键盘快捷键是一个程序员的必备技能&#xff0c;下面给大家整理了一下常用的键盘快捷键&#xff1b; ⭐CtrlP 打开“打印机”对话框&#xff1b; ⭐CtrlW 关闭当前网页&#xff1b; ⭐CtrlF 查找&#xff08;网页内查找&#xff09;&#xff1b; ⭐…...

Java类加载器

1 类加载器 1.1 类加载 当程序要使用某个类时&#xff0c;如果该类还未被加载到内存中&#xff0c;则系统会通过类的加载&#xff0c;类的连接,类的初始化这三个步骤来对类进行初始化。如果不出现意外情况&#xff0c;JVM将会连续完成这三个步骤,所以有时也把这三个步骤统称为…...

网站编辑建设/b2b电子商务平台排名

老孟导读&#xff1a;前2天有读者问到是否有带分页功能的表格控件&#xff0c;今天分页功能的表格控件详细解析来来。PaginatedDataTablePaginatedDataTable是一个带分页功能的DataTable&#xff0c;生成一批数据&#xff0c;项目中此一般通过服务器获取&#xff0c;定义model类…...

建站小程序编辑器闪亮登场/关键词优化上海

网站的配色方案决定了访问者对网站的第一印象&#xff0c;有很多工具可以帮助选择合适的配色方案&#xff0c;本文为网站设计者介绍五款免费的优秀网站配色方案工具。1. KulerKuler是一款倍受专业网页设计人员喜爱的工具&#xff0c;它在配色方案中增加了社会化媒体和网络因素&…...

玄武模板网站制作品牌/网络营销师官网

其实循环生成css都是定义一个数组&#xff0c;然后遍历生成&#xff0c;主要在于各个语言的调用方式不一样. 这里使用的rem作为基准单位&#xff0c;也可以用px或者其他 _variable.scss文件 // 文件名以下划线开头表示被引用文件&#xff0c;引用时不用加下划线和后缀名//定义…...

券优惠网站如何做/手机怎么自己制作网页

ASE快捷键介绍&#xff1a; Unity Shader ASE——快捷键_Maki_MWC的博客-CSDN博客_ase 快捷键 快捷键使用&#xff1a;按住快捷键不放&#xff0c;鼠标左键点击ASE编辑区域&#xff0c;例如&#xff1a;按住T&#xff0c;鼠标左击出现贴图节点&#xff08;Texture Sample&…...

网站建设模式/广州网站制作服务

一、综述二、项目启动三、需求分析四、概要设计五、详细设计与概要设计六、集成测试与系统测试七、交付验收八、系统运维九、配置管理和质量保障概要设计阶段包括&#xff1a;n 项目技术调研n 软件概要设计n 编写概要设计说明书n 概要设计评审1. 项目技术调研要素 描…...

上海网站域名备案处/搜索词分析

京东商品爬取仅供学习一.使用seleniumfrom selenium import webdriverfrom selenium.webdriver.common.keys import Keys #键盘按键操作from selenium.webdriver.support import expected_conditions as ECimport timedef get_goods(driver):try:goodsdriver.find_elements_by_…...