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

news2024/11/16 13:42: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/1106720.html

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

相关文章

C++ 与 Lua 数据交互载体——栈

C++ 与 Lua 数据交互载体——栈

一、栈 Lua 和 C 之间的通讯主要组件是无处不在的虚拟栈&#xff0c;两者间的数据交换都是通过这个栈进行。 栈中可以保存 Lua 任意类型的值。 1、Lua 和 C 之间的数据交互存在的差异 Lua 是动态类型&#xff0c;C 是静态类型&#xff0c;两者不匹配Lua 是自动内存管理&…
阅读更多...
【周末闲谈】VR新视界，“眼”见未来

【周末闲谈】VR新视界，“眼”见未来

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️周末闲谈】 系列目录 ✨第一周 二进制VS三进制 ✨第二周 文心一言&#xff0c;模仿还是超越&#xff1f; ✨第二周 畅想AR 文章目录 系列目录前言虚拟现实(VR)技术虚拟现实技术的原理虚拟现实技术发…
阅读更多...
v-model表单数据双向绑定-表单提交示例

v-model表单数据双向绑定-表单提交示例

示例如下&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>v-model表单数据双向绑定<…
阅读更多...
【Note】CNN与现代卷积神经网络part3（附PyTorch代码）

【Note】CNN与现代卷积神经网络part3（附PyTorch代码）

文章目录 2 现代卷积神经网络2.1 批量规范化2.1.1 训练深层网络2.1.2 批量规范化层2.1.2.1 全连接层2.1.2.2 卷积层2.1.2.3 预测过程中的批量规范化 2.1.3 从零实现2.1.4 使用批量规范化层的 LeNet2.1.5 简明实现2.1.6 controversies&#xff08;争议&#xff09;2.1.7 Summary…
阅读更多...
YOLOv7改进：新机制，扩展DCNv3，基于DCNv2优化 | CVPR2023 InternImage

YOLOv7改进：新机制，扩展DCNv3，基于DCNv2优化 | CVPR2023 InternImage

💡💡💡本文属于原创独家改进：DCNv3优势：1） 共享投射权重；2） 引入多组机制；3）采样点调制标量归一化； DCNv3 | 亲测在多个数据集实现暴力涨点； 收录： YOLOv7高阶自研专栏介绍： http://t.csdnimg.cn/tYI0c ✨✨✨前沿最新计算机顶会复现 🚀🚀🚀YOL…
阅读更多...
Flink学习之旅：（一）Flink部署安装

Flink学习之旅：（一）Flink部署安装

1.本地搭建 1.1.下载Flink 进入Flink官网&#xff0c;点击Downloads 往下滑动就可以看到 Flink 的所有版本了&#xff0c;看自己需要什么版本点击下载即可。 1.2.上传解压 上传至服务器&#xff0c;进行解压 tar -zxvf flink-1.17.1-bin-scala_2.12.tgz -C ../module/ 1.3.启…
阅读更多...
随机专享记录第一话 -- RustDesk的自我搭建和使用

随机专享记录第一话 -- RustDesk的自我搭建和使用

1.介绍 RustDesk是继TeamView、向日葵等远程桌面软件后的新起之秀，最主要的是开源的可自己搭建中继服务。相比于公共服务器，连接一次等待的时间要多久，用过TeamView的都知道，而且还是免费的，不像某些远程搞各种个人证书，各种登录设备限制！ 先看看软件图，这是待连接界…
阅读更多...
14.11 Socket 基于时间加密通信

14.11 Socket 基于时间加密通信

在之前的代码中我们并没有对套接字进行加密&#xff0c;在未加密状态下我们所有的通信内容都是明文传输的&#xff0c;这种方式在学习时可以使用但在真正的开发环境中必须要对数据包进行加密&#xff0c;此处笔者将演示一种基于时间的加密方法&#xff0c;该加密方法的优势是数…
阅读更多...
微信小程序获取手机号（2023年10月 python版）[无需订阅]

微信小程序获取手机号（2023年10月 python版）[无需订阅]

技术栈&#xff1a; 1. 微信开发者工具中的调试基础库版本&#xff1a;3.1.2。 2. 后台&#xff1a;django。 步骤&#xff1a; 1. 首先在后台django项目的定时任务中增加一个下载access_token函数&#xff0c;并把得到的access_token保存在数据库中&#xff08;其实随便哪里…
阅读更多...
SpringCloud学习笔记-gateway网关自定义全局过滤器

SpringCloud学习笔记-gateway网关自定义全局过滤器

需求&#xff1a;定义全局过滤器&#xff0c;拦截请求&#xff0c;判断请求的参数是否满足下面条件&#xff1a; 参数中是否有authorization&#xff0c; authorization参数值是否为admin 如果同时满足则放行&#xff0c;否则拦截 实现&#xff1a; 在gateway中定义一个过…
阅读更多...
C语言实现通讯录（超详细）

C语言实现通讯录（超详细）

1.实现怎样一个通讯录 实现一个通讯录联系人信息&#xff1a;1.可以保存100个人的信息名字2.添加联系人年龄3.删除指定联系人性别4.查找指定联系人电话5.修改指定联系人住址6.排序联系人7.显示所有联系人信息 2.通讯录的实现 2.1创建两个源文件和一个头文件 首先我们创建con…
阅读更多...
C++DAY47

C++DAY47

头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QPushButton> #include <QLabel> #include <QLineEdit> #include <QDebug>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public…
阅读更多...
数据结构----算法--五大基本算法（这里没有写分支限界法）和银行家算法

数据结构----算法--五大基本算法（这里没有写分支限界法）和银行家算法

数据结构----算法–五大基本算法&#xff08;这里没有写分支限界法&#xff09;和银行家算法 一.贪心算法 1.什么是贪心算法 在有多个选择的时候不考虑长远的情况&#xff0c;只考虑眼前的这一步&#xff0c;在眼前这一步选择当前的最好的方案 二.分治法 1.分治的概念 分…
阅读更多...
6-8 舞伴问题 分数 15

6-8 舞伴问题 分数 15

void DancePartner(DataType dancer[], int num) {LinkQueue maleQueue SetNullQueue_Link();LinkQueue femaleQueue SetNullQueue_Link();// 将男士和女士的信息分别加入对应的队列for (int i 0; i < num; i) {if (dancer[i].sex M){EnQueue_link(maleQueue, dancer[i]…
阅读更多...
Vue跨域配置

Vue跨域配置

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl 配置详情 请在项目的vue.config.js中通过proxy的配置&#xff0c;解决Vue跨域&#xff1b;代码如下&#xff1a; const { defineConfig } require(vue/cli-service) modu…
阅读更多...
用JavaScript输出0-9的两种方法、以及setTimeout的三个参数的意义

用JavaScript输出0-9的两种方法、以及setTimeout的三个参数的意义

方法一&#xff1a; for (let i 0; i < 10; i) {setTimeout(() > {console.log(i);}, 1000) } 方法二&#xff1a;利用 setTimeout 函数的第三个参数&#xff0c;会作为回调函数的第一个参数传入 for (var i 0; i < 10; i) {setTimeout(i > {console.log(i);…
阅读更多...
canvas画布中beginPath和closePath的作用要点

canvas画布中beginPath和closePath的作用要点

1.画笔画完一个图案后&#xff0c;立即又回到了原点&#xff0c;所以下次如果没有beginPath&#xff0c;就会从原点重新开始 2.beginPath相当于让画笔从原点抬起&#xff0c;重新开始一个新路径&#xff0c;不重复走之前的路径&#xff0c;所以不会覆盖之前的路径 3.closePat…
阅读更多...
通过IP地址查询避免电子招投标串标的方法

通过IP地址查询避免电子招投标串标的方法

随着电子招投标的广泛应用&#xff0c;诚实和公平的竞争变得至关重要。然而&#xff0c;一些不道德的投标者可能试图串通以获取不正当的竞争优势。为了解决这个问题&#xff0c;可以利用IP地址查控技术&#xff0c;确保电子招投标的公平性和透明性。本文将介绍如何通过IP地址查…
阅读更多...
XCode15与iOS17/17.1 真机测试问题处理

XCode15与iOS17/17.1 真机测试问题处理

XCode15与iOS17/17.1 真机测试问题处理&#xff0c;网上相关博客很多&#xff0c;摘录了如下实践后能起作用的地址如下&#xff1a;Xcode 15 报错处理 - 简书iOS17版本适配-CSDN博客 Xcode15适配-六虎 主要介绍下&#xff1a;Assertion failure in void _UIGraphicsBeginImag…
阅读更多...
【AI视野·今日Sound 声学论文速览 第二十六期】Mon, 16 Oct 2023

【AI视野·今日Sound 声学论文速览 第二十六期】Mon, 16 Oct 2023

AI视野今日CS.Sound 声学论文速览 Mon, 16 Oct 2023 Totally 7 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Sound Papers Low-latency Speech Enhancement via Speech Token Generation Authors Huaying Xue, Xiulian Peng, Yan Lu现有的基于深度学习的语音增强…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023