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

news2025/3/15 4:24:44

开题

单页面应用和多页面应用

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.coloradmin.cn/o/1103785.html

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

相关文章

Compose Material3 新增垂直分隔符（VerticalDivider）解析与疑惑

Compose Material3 新增垂直分隔符（VerticalDivider）解析与疑惑

前言 谷歌在 7 月 28 日发布了 Compose Material3 1.2.0-alpha04 版本&#xff0c;在该版本新增&#xff08;修改&#xff09;了两个组件&#xff0c;垂直分隔符和分段按钮&#xff1a; Experimental Segmented Button API. Dividers now have a parameter to control orienta…
阅读更多...
TwinCAT3 ADS与C++通讯

TwinCAT3 ADS与C++通讯

文章目录 一 ADS简介1.1 ADS通讯定义1.2 ADS通讯实现 二 上位机程序编写&#xff08;Visual Studio 2019&#xff09;2.1 启动VS2019,新建MFC项目2.2 添加ADS通讯链接库2.3 在程序中引入头文件 一 ADS简介 1.1 ADS通讯定义 ADS&#xff08;Advanced Design System&#xff09…
阅读更多...
从0开始编写BP，自适应学习率的BP神经网络，不使用MATLAB工具箱，纯手写matlab代码，以BP分类为例...

从0开始编写BP，自适应学习率的BP神经网络，不使用MATLAB工具箱，纯手写matlab代码，以BP分类为例...

与上篇文章不同&#xff0c;仔细读了上篇文章的小伙伴应该知道&#xff0c;BP神经网络是有一个学习率的&#xff0c;而这个学习率很大程度上决定着神经网络的效果。这里采用自适应学习率&#xff0c;实现纯手写BP神经网络。 编程时&#xff0c;激活函数选择Sigmoid函数&#xf…
阅读更多...
【计算机毕设选题推荐】网络在线考试系统SpringBoot+SSM+Vue

【计算机毕设选题推荐】网络在线考试系统SpringBoot+SSM+Vue

前言&#xff1a;我是IT源码社&#xff0c;从事计算机开发行业数年&#xff0c;专注Java领域&#xff0c;专业提供程序设计开发、源码分享、技术指导讲解、定制和毕业设计服务 项目名 网络在线考试系统 技术栈 SpringBootSSMVueMySQLMaven 文章目录 一、网络在线考试系统-环境…
阅读更多...
SLAM从入门到精通（dwa算法）

SLAM从入门到精通（dwa算法）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 要说搜路算法&#xff0c;这个大家都比较好理解。毕竟从一个地点走到另外一个地点&#xff0c;这个都是直觉上可以感受到的事情。但是这条道路上机…
阅读更多...
行情分析——加密货币市场大盘走势（10.17）

行情分析——加密货币市场大盘走势（10.17）

大饼昨日在受到假消息美国证券交易委员会&#xff08;SEC&#xff09;通过大饼ETF后迅速上涨&#xff0c;一度上涨到30000&#xff0c;而很快回落到28000附近。从MACD日线来看&#xff0c;现在完全进入多头趋势&#xff0c;同时大饼再次进入蓝色上涨趋势线&#xff0c;目前按照…
阅读更多...
李宏毅机器学习笔记-半监督学习

李宏毅机器学习笔记-半监督学习

半监督学习&#xff0c;一般应用于少量带标签的数据&#xff08;数量R&#xff09;和大量未带标签数据的场景&#xff08;数量U&#xff09;&#xff0c;一般来说&#xff0c;U>>R。 半监督学习一般可以分为2种情况&#xff0c;一种是transductive learning&#xff0c;…
阅读更多...
使用秋云 ucharts echarts 高性能跨全端图表组件 流程

使用秋云 ucharts echarts 高性能跨全端图表组件 流程

1. 2. // 引入 import qiunDataCharts from ../../uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue // 注册 components:{qiunDataCharts },// 页面中使用 <qiun-data-charts type"line" :opts"opts" :chartData"…
阅读更多...
04 MIT线性代数-矩阵的LU分解 Factorization into A=LU

04 MIT线性代数-矩阵的LU分解 Factorization into A=LU

目的: 从矩阵的角度理解高斯消元法, 完成LU分解得到ALU 1.矩阵乘积的逆矩阵 Inverse of a product 2.矩阵乘积的转置 Transpose of a product 3.转置矩阵的逆矩阵 Inverse of a transpose 4.矩阵的LU分解 U为上三角阵(Upper triangular matrix), L为下三角阵(Lower triangular…
阅读更多...
pycharm远程连接miniconda完整过程，以及遇到的问题解决

pycharm远程连接miniconda完整过程，以及遇到的问题解决

问题1&#xff1a;no-zero exit code(126) env: ‘/home/user2/miniconda3/envs/ihan/bin/python3’: Too many levels of symbolic links Python interpreter process exited with a non-zero exit code 126 因为选择的新建导致太多软连接&#xff0c;先在服务器上建好虚拟环…
阅读更多...
【微信小程序】数字化会议OA系统之首页搭建（附源码）

【微信小程序】数字化会议OA系统之首页搭建（附源码）

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《微信小程序开发实战》。&#x1f3af;&#x1f3a…
阅读更多...
eNSP笔记①

eNSP笔记①

关闭范文信息&#xff1a;undo terminal monitor VRP三种试图 "<>"表示用户视图&#xff0c;系统默认的状态。主要用于查询设备基础信息或者状态等&#xff0c;也可以执行保存(save)。 “[]” 表示系统视图&#xff0c;在用户视图下输入system-view进入状态…
阅读更多...
Kafka序列化反序列化解析、kafka schema

Kafka序列化反序列化解析、kafka schema

Kafka序列化反序列化解析、kafka schema。 kafka有自己的rpc协议，即nio bytebuf中的数据格式，详见之前的kafka相关介绍的文章。这里我们来看一下大家常用，有时又疑惑的序列化反序列化，对应rpc协议中的records，kafka叫Serdes，实际上也是字面上的意思serialize and deseri…
阅读更多...
Qt扫盲-QDataStream 序列化和反序列化理论

Qt扫盲-QDataStream 序列化和反序列化理论

QDataStream 序列化和反序列化理论 一、概述二、QDataStream 概述三、版本控制四、读取和写入原始二进制数据五、读写Qt集合类六、读写其他Qt类七、使用读事务八、Qt支持的序列化类型 一、概述 序列化&#xff1a; 指的是将一个内存对象转化成一串字节数据&#xff08;存储在一…
阅读更多...
FSDP(Fully Sharded Data Parallel)

FSDP(Fully Sharded Data Parallel)

完全分片数据并行 (FSDP) &#xff0c;它将AI 模型的参数分片到数据并行工作器上&#xff0c;并且可以选择将部分训练计算卸载到 CPU。顾名思义&#xff0c;FSDP 是一种数据并行训练算法。尽管参数被分片到不同的GPU&#xff0c;但每个微批次数据的计算仍然是每个 GPU Worker 本…
阅读更多...
C++ - 一些特殊类的设计

C++ - 一些特殊类的设计

前言 我们在日常写项目的过程当中&#xff0c;肯定会遇到各种各样的需求&#xff0c;那么也就要求我们要写各种各样的类。本篇博客当中&#xff0c;就一些常用的特殊类进行介绍和实现。 不能被拷贝的类 关于实例化类拷贝&#xff08;对象的拷贝&#xff09;一般就是两个场景&…
阅读更多...
6.DApp-用Web3实现前端与智能合约的交互

6.DApp-用Web3实现前端与智能合约的交互

题记 用Web3实现前端与智能合约的交互&#xff0c;以下是操作流程和代码。 准备ganache环境 文章地址&#xff1a;4.DApp-MetaMask怎么连接本地Ganache-CSDN博客 准备智能合约 文章地址&#xff1a; 2.DApp-编写和运行solidity智能合约-CSDN博客 编写index.html文件 <!…
阅读更多...
简单测试一下 展锐的 UDX710 性能

简单测试一下 展锐的 UDX710 性能

最近在接触 联通5G CPE VN007 &#xff0c;发现使用的是 展锐的Unisoc UDX710 CPU&#xff0c;正好简单的测试一下这颗CPU CPU信息 UDX710 是一颗 双核 ARM Cortex-A55 处理器&#xff0c;主频高达 1.35GHz processor : 0 BogoMIPS : 52.00 Features : fp…
阅读更多...
ARM资源记录《AI嵌入式系统：算法优化与实现》第八章（暂时用不到）

ARM资源记录《AI嵌入式系统：算法优化与实现》第八章（暂时用不到）

1.CMSIS的代码 书里给的5&#xff0c;https://github.com/ARM-software/CMSIS_5 现在有6了&#xff0c;https://github.com/ARM-software/CMSIS_6 这是官网的书&#xff0c;介绍cmsis函数的https://arm-software.github.io/CMSIS_5/Core/html/index.html 2.CMSIS介绍 Cort…
阅读更多...
Git命令在线练习网址--非常友好的提示及动画展示

Git命令在线练习网址--非常友好的提示及动画展示

Git命令在线练习 https://learngitbranching.js.org/ 举个栗子: 在练习时会给你相应提示,你可以按照相应步骤进行操作,并且每一步都有动画演示
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023