React 路由总结 react-router-dom6+react-router-dom5

开题

单页面应用和多页面应用

SPA：单页面应用程序，整个应用中只有一个页面(index.html)
MPA：多页面应用程序，整个应用中有很多页面(*.html)

react路由

现在的前端应用大多都是SPA单页面应用程序，也就是一个HTML页面的应用程序。体验更好，对服务器的压力更小，更受欢迎，为了有效地使用单页面来管理原来多页面的功能，前端路由就此产生了，前端路由能让一个视图或页面导航到另一个视图或页面中。
前端路由是一套映射规整，在React中，是URL路径与组件的对应关系，使用React路由简单来说就是配置路径和组件。
react路由
react路由

react模拟hash路由的实现

实现原理：其实hash路由的原理是监听hashChange事件
hash值：http://localhost:3000/#/home

之后的部分就是hash值，有以下两个特点

  • hash值的变化(地址栏中改变了hash值再回车)不会重新发送请求，它不是请求路径的一部分。
  • hash值的变化会触发hashChange事件

思路：维护一个状态curHash

  • 当has变化(hashChange事件)时修改它。
  • 根据curHash的值来决定显示哪个组件。

实现一个hash路由

目录结构：
react路由的学习
index.js

import './App.css';
import {Routes, Route, NavLink, Navigate} from 'react-router-dom'
import Home from "./Home"
import List from "./List"
import User from "./User"
const App = () => {return (<div>{/* 声明式导航 */}<div><NavLink end to="/home" state={{ id: 1000 }}>首页</NavLink><span> --- </span><NavLink to="/list">列表</NavLink><span> --- </span><NavLink to="/user">用户</NavLink></div><hr /><Routes><Route path='/home' element={<Home />} /><Route path='/list' element={<List />} /><Route path='/user' element={<User />} />{/* 重定向 */}<Route path="/" element={<Navigate to="/home" replace={false} />} />{/* 404页面处理 */}<Route path="*" element={<div>404页面</div>} /></Routes></div>)
}
export default App

效果
react路由的学习
react路由的学习
react路由的学习
react路由的学习

React路由使用的基本

我当前react18 + react-router-dom6.0版本。

react-router-dom5 与 react-router-dom6的区别

  1. 重命名为
  2. 的新特性变更component/render被element替代
  3. 嵌套路由变得更简单 a. Route children 已更改为接受子路由。
    b. 比Route exact 和 Route strict更简单的匹配规则。
    c. Route path 路径层次更清晰。
  4. 用 useNavigate 替代 useHistory
  5. 新钩子 useRoutes 替代 react-router-config

一、安装react-router-dome6.0

npm i react-router-dom@6

react-router-dom 提供了三个核心的组件,HashRouter,Route,Link

二、导入包并使用

使用HashRouter包裹整个应用，一个项目中自会有一个Router，index.js界面如下引入
react-router-dom的导入使用

三、使用Link指定导航链接

使用Route指定路由规则，那个路径展示那个组件

核心代码：

import './App.css';
import {Routes, Route, NavLink,Link, Navigate} from 'react-router-dom'
import Home from "./Home"
import List from "./List"
import User from "./User"
const App = () => {return (<div>{/* 声明式导航 */}<div><NavLink end to="/home" state={{ id: 1000 }}>首页</NavLink><span> --- </span><NavLink to="/list">列表</NavLink><span> --- </span><NavLink to="/user">用户</NavLink></div><hr /><Routes><Route path='/home' element={<Home />} /><Route path='/list' element={<List />} /><Route path='/user' element={<User />} />{/* 重定向 */}<Route path="/" element={<Navigate to="/home" replace={false} />} />{/* 404页面处理 */}<Route path="*" element={<div>404页面</div>} /></Routes></div>)
}
export default App

要点总结：

  1. Route组件必须在Router组件内部。
  2. NavLink,Link组件的to属性的值为点击后跳转的路径。
  3. Route组建的Path属性与Link标签的to属性匹配的。
  4. component属性标识Route组件匹配成功后渲染的对象。

路由三大对象之-Router

Router组件：包裹整个应用，一个React应用只需要使用一次，两种常用的Router:HashRouter和BrowserRouter。

react的HashRouterreact的BrowserRouter
或者另一种写法
react的BrowserRouter和HashRouter
HashRouter：hash模式 http://localhost:3000/#/home。

原理：监听 window 的hashchange 事件来实现。

BrowserRouter：history模式，使用H5的history.pushState()API实现http://localhost:3000/home。

原理：监听 window 的popstate 事件来实现。

路由三大对象之-Link

Link组件、最终会渲染成标签，用于指定路由导航，to属性表示a标签的href属性，link组件无法暂时那个link处于选中状态。

格式：<Link to="/search">搜索</Link>

NavLink 组件、一个更特殊的Link组件，可以用用于指定当前导航高亮。to属性，用于指定地址，会渲染成a标签的href属性，activeClassName:用于指定高亮的类名，默认active，一般不做修改，exact精确匹配，标识必须地址栏和to的属性值精确匹配类名才生效

格式：<NavLink to="/search">搜索</NavLink>

ink和NavLink都用来做路由跳转。它们都用****属性来指定跳转地址，link和NavLink的区别是，NavLink指向的路径会自带一个名为
__的class类名。

使用NavLink实现高亮显示

引入app.css

.active{color: blue ;
}

app.js代码

import './App.css';
import {Routes, Route, NavLink, Navigate} from 'react-router-dom'
import Home from "./Home"
import List from "./List"
import User from "./User"
const isActive = ({isActive}) => isActive?'active':''
const App = () => {return (<div>{/* 声明式导航 */}<div><NavLink to="/home" className={isActive}>首页</NavLink><span> --- </span><NavLink to="/list" className={isActive}>列表</NavLink><span> --- </span><NavLink to="/user">用户</NavLink></div><hr /><Routes><Route path='/home' element={<Home />} /><Route path='/list' element={<List />} /><Route path='/user' element={<User />} />{/* 重定向 */}<Route path="/" element={<Navigate to="/home" replace={false} />} />{/* 404页面处理 */}<Route path="*" element={<div>404页面</div>} /></Routes></div>)
}
export default App

效果：
react中使用NavLink实现高亮显示

路由三大对象之-Route

route决定路由匹配规则：

	格式：<Route path="/xx/xx" component={组件}></Route>

匹配规则：

名词约定

  1. path ：Route组件中path属性的值
  2. pathname:值得如下格式
        a. link组件中to的属性值
        b. 地址栏中的地址

模糊匹配规则

  1. 只要pathname以path开头就算匹配成功。
  2. 匹配成功就加载对应组件。
  3. 整个匹配过程是逐一匹配，一个匹配成功了，并不会停止匹配。

精确匹配规则

  1. 当pathname(link的to属性/地址栏url的pathname)和的path属性的值完全相同时，才能匹配成功
  2. 精确匹配的方式给Route组件添加exact属性

模糊匹配和精确匹配

  1. 默认是模糊匹配的
  2. 补充exact可以设置成精确匹配

在这里插入图片描述

Switch / 404 / 重定向

Route组件匹配成功之后并不会停止，它可能会匹配多个组件。使用Switch组件，匹配第一个符合条件的Route，然后把一个无path的Route组件写在switch的最后一项，这样就能在匹配不到合适组件的时候，总能匹配到最后一个Route对应的组件。在switch组件下，不管有多少哥Route的路由规则匹配成功，都只会渲染第一个匹配的组件。在react-router-dom6
中 重命名为

处理404页

方法一、不设置path属性，将404页对应的路由放在switch内部的最后位置

	<Route element={<div>404页面</div>} />

方法二、

	<Route path="*" element={<div>404页面</div>} />

重定向

重定向到首页：如果你更倾向于将用户引导回首页，可以使用导航元素
将所有未匹配路由重定向到首页。

代码演示：

	<Route path="/" element={<Navigate to="/home" replace={false} />} />

编程式导航

react-router-dom 编程式路由导航 (v5)

1.push跳转+携带params参数

	props.history.push(`/b/child1/${id}/${title}`)

2.push跳转+携带search参数

	props.history.push(`/b/child1?id=${id}&title=${title}`)

3.push跳转+携带state参数

	props.history.push(`/b/child1`,{id,title})

4.replace跳转+携带params参数

	this.props.history.replace(`/home/message/detail/${id}/${title}`)

5.replace跳转+携带search参数

	this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)

6.replace参数+携带跳转state参数

	this,props.history.replace(`/home/message/detail`,{id,title})

7.前进

	this.props.history.goForward()

8.回退

	this.props.history.goForward()

9.前进或回退

	this.props.history.go(-1)  辉瑞到前一条的路由

react-router-dom 编程式路由导航 (v6)

1.push跳转+携带params参数

navigate(`/b/child1/${id}/${title}`)

传递参数【http://localhost:3000/#/list/001/消息1】
react中push跳转+携带params参数的接收
react中push跳转+携带params参数的接收
接收：
react中接收路由参数
效果
react中接收路由参数

2.push跳转+携带search参数

navigate(`/b/child2?id=${id}&title=${title}`)

react通过路由传递search参数和接收search参数
react通过路由传递search参数和接收search参数
react通过路由传递search参数和接收search参数
效果：
react通过路由传递search参数和接收search参数

3.push跳转+携带state参数

navigate(`/b/child2`,{state:{id,title}})

路由不需要做任何添加
react路由跳转携带state参数和接收参数
navigate设置
react路由跳转携带state参数和接收
接收
react路由跳转并携带state参数和接收路由state参数
效果：
react路由跳转并携带state参数和接收路由state参数

4.replace跳转+携带params参数

navigate(`/b/child1/${id}/${title}`,{replace:true})

5.replace跳转+携带search参数

navigate(`/b/child2?id=${id}&title=${title}`,{replace:true})

6.replace跳转+携带state参数

navigate("/b/child2",{state:{id,title},replace:true})

react路由传递参数及其使用

路由传参总结

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}}}>详情</ Link>
注册路由(无需声明，正常注册即可)：
接收参数：this.props.location.state
备注：刷新也可以保留住参数

4. 在写嵌套路时注意:

1.注册子路由时要写上父路由的path值
2.路由的匹配是按照注册路由的顺序进行的
3.在写Redirect (重定向)时注意:一般写在所有路由注册的最下方,当所有路由都无法匹配时,跳转到Redirect（重定向）指定的路由

完结~

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

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

相关文章

百度OCR识别图片文本字符串——物联网上位机软件

百度OCR识别图片文本字符串——物联网上位机软件

一、开发背景 根据项目需求&#xff0c;我们需要完成LED显示屏实时显示歌词的效果。最优的方法是调用歌曲播放器的API获取歌词&#xff0c;但是由于这个开发资格不是很好申请&#xff0c;因此我们采用其他方案&#xff0c;即通过OCR识别获取歌词&#xff0c;并投射到LED显示屏上…
阅读更多...
ExposureDiffusion: Learning to Expose for Low-light Image Enhancement论文阅读笔记

ExposureDiffusion: Learning to Expose for Low-light Image Enhancement论文阅读笔记

南洋理工大学、鹏城实验室、香港理工大学在ICCV2023发表的暗图增强论文。用diffusion模型来进行raw图像暗图增强&#xff0c;同时提出了一个自适应的残差层用来对具有不同信噪比的不同区域采取不同的去噪策略。 方法的框图如下所示&#xff1a; 一张raw图片可以由信号和噪声…
阅读更多...
Maven 基础教程系列

Maven 基础教程系列

Maven是一个项目开发管理和理解工具。基于项目对象模型的概念&#xff1a;构建、依赖关系管理、文档创建、站点发布和分发发布都由pom.xml声明性文件控制。Maven可以通过插件进行扩展&#xff0c;以使用许多其他开发工具来报告或构建过程。 一、Maven 使用教程-CSDN博客 二、…
阅读更多...
Eclipse Xtext 实现PLC ST 语言到C的转换

Eclipse Xtext 实现PLC ST 语言到C的转换

Eclipse Xtext 是开发领域专用语言&#xff08;DSL&#xff09;的工具。例如数据库的SQL 语言&#xff0c;PLC 的ST 语言都是一种领域专用语言。在开放自动化领域&#xff0c;提倡基于模型的设计方法。DSL 是描述模型的强有力工具。 在开发PLC 程序IDE时&#xff0c;开发ST编译…
阅读更多...
网络安全内网渗透之信息收集--systeminfo查看电脑有无加域

网络安全内网渗透之信息收集--systeminfo查看电脑有无加域

systeminfo输出的内容很多&#xff0c;包括主机名、OS名称、OS版本、域信息、打的补丁程序等。 其中&#xff0c;查看电脑有无加域可以快速搜索&#xff1a; systeminfo|findstr "域:" 输出结果为WORKGROUP&#xff0c;可见该机器没有加域&#xff1a; systeminfo…
阅读更多...
LeetCode【17】电话号码的字母组合

LeetCode【17】电话号码的字母组合

题目&#xff1a; 思路&#xff1a; 参考&#xff1a;https://blog.csdn.net/weixin_46429290/article/details/121888154 和上一个题《子集》的思路一样&#xff0c;先画出树结构&#xff0c;看树的深度&#xff08;遍历层级&#xff09;&#xff0c;树的宽度&#xff08;横向…
阅读更多...
10.18作业

10.18作业

使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函数 将登录按钮使用qt5版本的连接到自定义的槽函数中&#xff0c;在槽函数中判断ui界面上输入的账号是否为"admin"&#xff0c;密码是否为…
阅读更多...
C++11——包装器与lambda表达式

C++11——包装器与lambda表达式

目录 一.背景 二.lambda 1.见一见lambda 2.lambda表达式语法 3.lambda捕捉列表说明 三.函数对象与lambda表达式 四.包装器 1.function包装器 2.包装类的成员函数 五.bind 1.调整参数位置 2.减少函数参数 一.背景 在C98中&#xff0c;如果想要对一个数据集合中的元素…
阅读更多...
成都瀚网科技：如何有效运营抖店来客呢？

成都瀚网科技：如何有效运营抖店来客呢？

随着电子商务的快速发展和移动互联网的普及&#xff0c;越来越多的企业开始将目光转向线上销售渠道。其中&#xff0c;抖音成为备受关注的平台。作为中国最大的短视频社交平台之一&#xff0c;抖音每天吸引数亿用户&#xff0c;这也为企业提供了巨大的商机。那么&#xff0c;如…
阅读更多...
F5.5G落进现实：目标网带来的光之路

F5.5G落进现实：目标网带来的光之路

数字化与智能化的世界将走向何方&#xff1f;这个问题有着非常复杂的答案&#xff0c;但其中有一个答案已经十分清晰。那就是智能化的下一步&#xff0c;必将走向泛在万兆的世界。 网络是算力联接的底座&#xff0c;是智能演化的基础。纵观每一代数字化升级&#xff0c;都可以发…
阅读更多...
代码随想录Day22 LeetCode T39 组合总和 T40 组合总和II T131 分割回文串

代码随想录Day22 LeetCode T39 组合总和 T40 组合总和II T131 分割回文串

LeetCode T39 组合总和 题目链接:39. 组合总和 - 力扣&#xff08;LeetCode&#xff09; 树形图 题目思路: 这我们会发现和昨天的题目很像,只是这里的元素并不是只能选取一次了,我们可以根据代码画出树形图来解决问题,下面我们开始递归三部曲 首先我们先定义出result和path数…
阅读更多...
亲,手撸图文博文太累了?试试这个神器!

亲,手撸图文博文太累了?试试这个神器!

这一篇博客有关如何使用[InternLM-XComposer]来写图文并茂的博文。InternLM-XComposer是一个基于人工智能的创作工具&#xff0c;它可以根据你的输入生成不同类型的内容&#xff0c;例如文章、诗歌、歌词、代码等。你可以使用它来创作有趣和有创意的博客&#xff0c;同时也可以…
阅读更多...
C# OpenCvSharp 利用Lab空间把春天的场景改为秋天

C# OpenCvSharp 利用Lab空间把春天的场景改为秋天

效果 项目 代码 using OpenCvSharp; using System; using System.Diagnostics; using System.Drawing; using System.Drawing.Imaging; using System.Windows.Forms;namespace OpenCvSharp_Demo {public partial class Form1 : Form{public Form1(){InitializeComponent();}st…
阅读更多...
免费：实时 AI 编程助手 Amazon CodeWhisperer

免费：实时 AI 编程助手 Amazon CodeWhisperer

点 &#xff0c;一起程序员弯道超车之路 现已正式推出实时 AI 编程助手 Amazon CodeWhisperer&#xff0c;包括 CodeWhisperer 个人套餐&#xff0c;所有开发人员均可免费使用。最初于去年推出的预览版 CodeWhisperer 让开发人员能够保持专注、高效&#xff0c;帮助他们快速、安…
阅读更多...
如何管理前端状态？

如何管理前端状态？

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…
阅读更多...
计算机网络中的CSMA/CD算法的操作流程（《自顶向下》里的提炼总结）

计算机网络中的CSMA/CD算法的操作流程（《自顶向下》里的提炼总结）

具有碰撞检测的载波侦听多路访问&#xff08;CSMA/CD算法&#xff09; 以下内容总结&#xff0c;对应《计算机网络自顶向下第七版》第六章链路层和局域网P299 操作流程&#xff1a; NIC&#xff08;适配器&#xff0c;即网络接口&#xff09;从网络层接收数据报&#xff0c;…
阅读更多...
OneDrive打不开了，怎么办？使用管理员身份也无效，分享解决办法如下

OneDrive打不开了，怎么办？使用管理员身份也无效，分享解决办法如下

文章目录 1、问题描述2、解决办法2.1 修改注册表信息2.2 修改本地组策略 1、问题描述 电脑自带的 OneDrive 突然打不开了&#xff0c;双击也没有任何反应&#xff0c;以管理员身份打开也不行。去看了好多资料才解决这个问题&#xff0c;现分享如下&#xff1b; 2、解决办法 …
阅读更多...
用友GRP-U8 SQL注入漏洞复现

用友GRP-U8 SQL注入漏洞复现

0x01 产品简介 用友GRP-U8R10行政事业财务管理软件是用友公司专注于国家电子政务事业&#xff0c;基于云计算技术所推出的新一代产品&#xff0c;是我国行政事业财务领域最专业的政府财务管理软件。 0x02 漏洞概述 用友GRP-U8的bx_historyDataCheck jsp、slbmbygr.jsp等接口存…
阅读更多...
视频批量加水印：保护版权，提升效率

视频批量加水印：保护版权，提升效率

在当今的自媒体时代&#xff0c;视频制作已经成为许多人的一项必备技能。然而&#xff0c;在视频制作过程中&#xff0c;如何为自己的视频添加独特的水印以保护知识产权&#xff0c;常常让许多制作者感到困扰。本文将为你揭示如何通过固乔剪辑助手软件&#xff0c;简单几步批量…
阅读更多...
性能测试：测试常见的指标（超详细~）

性能测试：测试常见的指标（超详细~）

前言 今天想和大家来聊聊性能测试常见的指标&#xff0c;我在这里也不喜欢说废话我们直接开始吧。 同时&#xff0c;我也为大家准备了一份软件测试视频教程&#xff08;含面试、接口、自动化、性能测试等&#xff09;&#xff0c;就在下方&#xff0c;需要的可以直接去观看&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023