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.hqwc.cn/news/140773.html

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

相关文章

Leetcode刷题笔记--Hot61-70

Leetcode刷题笔记--Hot61-70

1--课程表&#xff08;207&#xff09; 主要思路&#xff1a; 用 in 记录每一门课程剩余的先修课程个数&#xff0c;当剩余先修课程个数为0时&#xff0c;将该课程加入到队列q中。 每修队列q中的课程&#xff0c;以该课程作为先修课程的所有课程&#xff0c;其剩余先修课程个数…
阅读更多...
和鲸ModelWhale与中科可控X系列异构加速服务器完成适配认证，搭载海光芯片，构筑AI算力底座

和鲸ModelWhale与中科可控X系列异构加速服务器完成适配认证，搭载海光芯片，构筑AI算力底座

AIGC 时代&#xff0c;算力作为新型生产力&#xff0c;是国家和企业构建竞争优势的关键。而随着传统计算方式无法满足新时代激增的算力需求&#xff0c;计算场景的多元化和计算应用的复杂化推动了 CPUGPU 异构平台的加速组建。在此全球激烈角逐的大趋势下&#xff0c;我国信创产…
阅读更多...
LabVIEW中管理大型数据

LabVIEW中管理大型数据

LabVIEW中管理大数据 LabVIEW的最大优势之一是自动内存管理。这种内存管理允许用户轻松创建字符串、数组和集群&#xff0c;而无需C/C用户经常担心。但是&#xff0c;这种内存管理设计为绝对安全&#xff0c;因此数据被非常频繁地复制。这通常不会造成任何问题&#xff0c;但是…
阅读更多...
公网使用PLSQL远程连接Oracle数据库【内网穿透】

公网使用PLSQL远程连接Oracle数据库【内网穿透】

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏:《速学数据结构》 《C语言进阶篇》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 前言1. 数据库搭建2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射 3. 公网远程访问4. 配置固定TCP端口地址…
阅读更多...
Flutter视图原理之StatefulWidget，InheritedWidget

Flutter视图原理之StatefulWidget，InheritedWidget

目录 StatefulElement1. 构造函数2. build3. _firstBuild3. didChangeDependencies4. setState InheritedElement1. Element类2. _updateInheritance3. InheritedWidget数据向下传递3.1 dependOnInheritedWidgetOfExactType 4. InheritedWidget的状态绑定4.1. ProxyElement 在f…
阅读更多...
潮玩IP助力环境保护，泡泡玛特发布行业首款碳中和产品

潮玩IP助力环境保护，泡泡玛特发布行业首款碳中和产品

在今年的2023上海PTS国际潮流玩具展上&#xff0c;泡泡玛特正式发布了首款“碳中和”潮玩产品DIMOO X蒙新河狸手办&#xff08;下简称DIMOO河狸&#xff09;&#xff0c;通过环保主题与流行文化的联合&#xff0c;让年轻人知道野生动物保护有多种方式&#xff0c;同时以创新的设…
阅读更多...
分布式服务的链路跟踪 Sleuth Micrometer zipkin OpenTelemetry

分布式服务的链路跟踪 Sleuth Micrometer zipkin OpenTelemetry

由来 在分布式应用开发过程中&#xff0c;一个请求会调用多个应用&#xff0c;会有那种需要知道各个应用之间耗时的想法&#xff0c;这样可以知道一个调用的总时长以及各个组件之间的处理耗时&#xff0c;后面方便定位问题。 理论依据 起源于 google dapper 论文 https://re…
阅读更多...
微信小程序--小程序框架

微信小程序--小程序框架

目录 前言&#xff1a; 一.框架基本介绍 1.整体结构&#xff1a; 2.页面结构&#xff1a; 3.生命周期&#xff1a; 4.事件系统&#xff1a; 5.数据绑定&#xff1a; 6.组件系统&#xff1a; 7.API&#xff1a; 8.路由&#xff1a; 9.模块化&#xff1a; 10.全局配置&…
阅读更多...
MySQL - 利用存储过程生成数据

MySQL - 利用存储过程生成数据

建表语句 create table users (user_id int auto_incrementprimary key,username varchar(255) not null,email varchar(255) not null,password varchar(255) …
阅读更多...
Go 存储系列：LSM存储引擎 LevelDB

Go 存储系列：LSM存储引擎 LevelDB

概念介绍 LSM-Tree 被是一种面向写多读少应用场景的数据结构 &#xff0c;被 Hbase、RocksDB 等强力 NoSQL 数据库采用作为底层文件组织方式。 简单的LSM-Tree 包含 2 层树状数据结构&#xff1a; Memtable 并完全驻留在内存中&#xff08;假设 T0&#xff09; SStables 存储…
阅读更多...
HarmonyOS音频开发指导：使用AVPlayer开发音频播放功能

HarmonyOS音频开发指导：使用AVPlayer开发音频播放功能

如何选择音频播放开发方式 在HarmonyOS系统中&#xff0c;多种API都提供了音频播放开发的支持&#xff0c;不同的API适用于不同音频数据格式、音频资源来源、音频使用场景&#xff0c;甚至是不同开发语言。因此&#xff0c;选择合适的音频播放API&#xff0c;有助于降低开发工…
阅读更多...
期中考核复现（web）

期中考核复现（web）

1z_upload 进到这个页面里面还是挺懵的&#xff0c;什么也不知道 点添加书籍之后发现变成了sql 师兄给了源码&#xff0c;看了之后找到了他的限制函数 但是肯定要先登录才可以 登录还是用bp爆破 最后得到账号密码是admin/admin12345 进来之后就可以看到那个文件上传的地方 上…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023