React-Router6路由相关二（路由传参、编程式路由导航、路由相关hooks）（八）

news2024/9/20 15:01:59

系列文章目录

第一章：React基础知识（React基本使用、JSX语法、React模块化与组件化）（一）
第二章：React基础知识（组件实例三大核心属性state、props、refs）（二）
第三章：React基础知识（事件处理、受控组件与非受控组件、高阶函数、组件的生命周期）（三）
第四章：React脚手架应用（创建脚手架、代理配置、ajax相关、组件通信）（四）
第五章：react-router5路由相关一（路由相关概念、基本使用、NavLink与NavLink的封装、Switch的使用、严格匹配、路由重定向、路由组件与一般组件的区别）（五）
第六章：react-router5路由相关二（嵌套路由、路由传参、replace、编程式路由导航、withRouter的使用、BrowserRouter与HashRouter的区别）（六）
第七章：React-Router6路由相关一（路由的基本使用、重定向、NavLink·、路由表、嵌套路由）（七）
第八章：React-Router6路由相关二（路由传参、编程式路由导航、路由相关hooks）（八）

文章目录

  • 系列文章目录
    • 一、路由传参
      • 1.1 params参数
      • 1.2 search参数
      • 1.3 state参数
    • 二、编程式路由导航
    • 三、其他相关路由Hooks
      • 3.1 useInRouterContext()
      • 3.2 useNavigationType()
      • 3.3 useOutlet()
      • 3.4 useResolvedPath()

一、路由传参

1.1 params参数

  • useParams()

    • 作用：回当前匹配路由的params参数，类似于5.x中的match.params

  • useMatch()

    • 作用：返回当前匹配信息，对标5.x中的路由组件的match属性。

代码片段(此代码案例跟之前大部分一致，挑重点写)：

Home.jsx

import React from 'react'
import {NavLink,Outlet} from 'react-router-dom'

export default function Home() {
	return (
		<div>
			<h2>Home组件内容</h2>
			<div>
				<ul className="nav nav-tabs">
					<li>
						<NavLink className="list-group-item" to="news">News</NavLink>
					</li>
					<li>
						<NavLink className="list-group-item" to="message">Message</NavLink>
					</li>
				</ul>
				{/* 指定路由组件呈现的位置 */}
				<Outlet />
			</div>
		</div>
	)
}

Message.jsx

import React,{useState} from 'react'
import {Link,Outlet} from 'react-router-dom'

export default function Message() {
	const [messages] = useState([
		{id:'001',title:'消息1',content:'锄禾日当午'},
		{id:'002',title:'消息2',content:'汗滴禾下土'},
		{id:'003',title:'消息3',content:'谁知盘中餐'},
		{id:'004',title:'消息4',content:'粒粒皆辛苦'}
	])
	return (
		<div>
			<ul>
				{
					messages.map((m)=>{
						return (
							// 路由链接
							<li key={m.id}>
								<Link to={`detail/${m.id}/${m.title}/${m.content}`}>{m.title}</Link>
							</li>
						)
					})
				}
			</ul>
			<hr />
			{/* 指定路由组件的展示位置 */}
			<Outlet />
		</div>
	)
}

Details.jsx


import React from 'react'
import { useParams, useMatch } from 'react-router-dom'

export default function Detail () {
	const { id, title, content } = useParams()
	const x = useMatch('/home/message/detail/:id/:title/:content')
	console.log(x, useParams())
	return (
		<ul>
			<li>消息编号：{id}</li>
			<li>消息标题：{title}</li>
			<li>消息内容：{content}</li>
		</ul>
	)
}

运行结果：
在这里插入图片描述
在这里插入图片描述

1.2 search参数

  • useSearchParams()

    • 作用：用于读取和修改当前位置的 URL 中的查询字符串。

    • 返回一个包含两个值的数组，内容分别为：当前的seaech参数、更新search的函数。

  • useLocation()

    • 作用：获取当前 location 信息，对标5.x中的路由组件的location属性。

代码片段(此代码案例跟之前大部分一致，挑重点写)：

Message.jsx

import React,{useState} from 'react'
import {Link,Outlet} from 'react-router-dom'

export default function Message() {
	const [messages] = useState([
		{id:'001',title:'消息1',content:'锄禾日当午'},
		{id:'002',title:'消息2',content:'汗滴禾下土'},
		{id:'003',title:'消息3',content:'谁知盘中餐'},
		{id:'004',title:'消息4',content:'粒粒皆辛苦'}
	])
	return (
		<div>
			<ul>
				{
					messages.map((m)=>{
						return (
							// 路由链接
							<li key={m.id}>
								<Link to={`detail?id=${m.id}&title=${m.title}&content=${m.content}`}>{m.title}</Link>
							</li>
						)
					})
				}
			</ul>
			<hr />
			{/* 指定路由组件的展示位置 */}
			<Outlet />
		</div>
	)
}

Details.jsx

import React from 'react'
import {useSearchParams,useLocation} from 'react-router-dom'

export default function Detail() {
	const [search,setSearch] = useSearchParams()
	const id = search.get('id')
	const title = search.get('title')
	const content = search.get('content')
	const x = useLocation()
	console.log('@',x)
	return (
		<ul>
			<li>
				<button onClick={()=>setSearch('id=008&title=哈哈&content=嘻嘻')}>点我更新一下收到的search参数</button>
			</li>
			<li>消息编号：{id}</li>
			<li>消息标题：{title}</li>
			<li>消息内容：{content}</li>
		</ul>
	)
}

运行结果：
在这里插入图片描述
在这里插入图片描述

1.3 state参数

代码片段(此代码案例跟之前大部分一致，挑重点写)：

Message.jsx

import React,{useState} from 'react'
import {Link,Outlet} from 'react-router-dom'

export default function Message() {
	const [messages] = useState([
		{id:'001',title:'消息1',content:'锄禾日当午'},
		{id:'002',title:'消息2',content:'汗滴禾下土'},
		{id:'003',title:'消息3',content:'谁知盘中餐'},
		{id:'004',title:'消息4',content:'粒粒皆辛苦'}
	])
	return (
		<div>
			<ul>
				{
					messages.map((m)=>{
						return (
							// 路由链接
							<li key={m.id}>
								<Link 
									to="detail" 
									state={{
										id:m.id,
										title:m.title,
										content:m.content,
									}}
								>{m.title}</Link>
							</li>
						)
					})
				}
			</ul>
			<hr />
			{/* 指定路由组件的展示位置 */}
			<Outlet />
		</div>
	)
}

Details.jsx

import React from 'react'
import {useLocation} from 'react-router-dom'

export default function Detail() {
	const {state:{id,title,content}} = useLocation()
    console.log(useLocation())

	return (
		<ul>
			<li>消息编号：{id}</li>
			<li>消息标题：{title}</li>
			<li>消息内容：{content}</li>
		</ul>
	)
}

运行结果：
在这里插入图片描述
在这里插入图片描述

二、编程式路由导航

  • useNavigate()
    • 作用：返回一个函数用来实现编程式导航。

代码片段(此代码案例跟之前大部分一致，挑重点写)：

Message.jsx

import React,{useState} from 'react'
import {Link,Outlet,useNavigate} from 'react-router-dom'

export default function Message() {
	const navigate = useNavigate()
	const [messages] = useState([
		{id:'001',title:'消息1',content:'锄禾日当午'},
		{id:'002',title:'消息2',content:'汗滴禾下土'},
		{id:'003',title:'消息3',content:'谁知盘中餐'},
		{id:'004',title:'消息4',content:'粒粒皆辛苦'}
	])
	
	function showDetail(m){
		navigate('detail',{
			replace:false,
			state:{
				id:m.id,
				title:m.title,
				content:m.content
			}
		})
	}
	return (
		<div>
			<ul>
				{
					messages.map((m)=>{
						return (
							// 路由链接
							<li key={m.id}>
								<Link 
									to="detail" 
									state={{
										id:m.id,
										title:m.title,
										content:m.content,
									}}
								>{m.title}</Link>
								<button onClick={()=>showDetail(m)}>查看详情</button>
							</li>
						)
					})
				}
			</ul>
			<hr />
			{/* 指定路由组件的展示位置 */}
			<Outlet />
		</div>
	)
}

Details.jsx

import React from 'react'
import {useLocation} from 'react-router-dom'

export default function Detail() {
	const {state:{id,title,content}} = useLocation()
	console.log(useLocation())

	return (
		<ul>
			<li>消息编号：{id}</li>
			<li>消息标题：{title}</li>
			<li>消息内容：{content}</li>
		</ul>
	)
}

Header.jsx

import React from 'react'
import {useNavigate} from 'react-router-dom'

export default function Header() {
	const navigate = useNavigate()

	function back(){
		navigate(-1)
	}
	function forward(){
		navigate(1)
	}

	return (
		<div className="col-xs-offset-2 col-xs-8">
			<div className="page-header">
				<h2>React Router Demo</h2>
				<button onClick={back}>←后退</button>
				<button onClick={forward}>前进→</button>
			</div>
		</div>
	)
}

运行结果：
在这里插入图片描述
在这里插入图片描述

三、其他相关路由Hooks

3.1 useInRouterContext()

​ 作用： 如果组件在路由的上下文中呈现，则 useInRouterContext 钩子返回 true，否则返回 false。

代码片段(此代码案例跟之前大部分一致，挑重点写)：
Demo.jsx


import React from 'react'
import { useInRouterContext } from 'react-router-dom'

export default function Demo () {
	console.log('demo:' + useInRouterContext())
	return (
		<div>Demo</div>
	)
}

Header.jsx


import React from 'react'
import { useNavigate, useInRouterContext } from 'react-router-dom'

export default function Header () {
	console.log('header:' + useInRouterContext())

	const navigate = useNavigate()

	function back () {
		navigate(-1)
	}
	function forward () {
		navigate(1)
	}

	return (
		<div className="col-xs-offset-2 col-xs-8">
			<div className="page-header">
				<h2>React Router Demo</h2>
				<button onClick={back}>←后退</button>
				<button onClick={forward}>前进→</button>
			</div>
		</div>
	)
}

About.jsx

import React from 'react'
import { useInRouterContext } from 'react-router-dom'


export default function About () {
	console.log('about:' + useInRouterContext())

	return (
		<h3>我是About的内容</h3>
	)
}

运行结果：
在这里插入图片描述

3.2 useNavigationType()

  • 作用： 返回当前的导航类型（用户是如何来到当前页面的）。
  • 返回值：POP、PUSH、REPLACE。
  • 备注：POP是指在浏览器中直接打开了这个路由组件（刷新页面）。

3.3 useOutlet()

  • 作用：用来呈现当前组件中渲染的嵌套路由。

示例代码：

const result = useOutlet()
console.log(result)
// 如果嵌套路由没有挂载,则result为null
// 如果嵌套路由已经挂载,则展示嵌套的路由对象

3.4 useResolvedPath()

  • 作用： 给定一个 URL值，解析其中的：path、search、hash值。

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

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

相关文章

ffmpeg vs2017录制vp9格式的桌面视频

ffmpeg vs2017录制vp9格式的桌面视频

ffmpeg本身不支持vp8,vp9&#xff1b;若要支持&#xff0c;则需要自己事先编译好vpx库&#xff0c;然后在ffmpeg中显式支持vpx库。 windows下采用mingw编译器编译vpx&#xff1b;本人采取的是MSYS2&#xff0c;并且本人编译vpx和ffmpeg时&#xff0c;编译的都是静态库&#xf…
阅读更多...
【云原生】在Ubuntu18/20上部署Kubernetes/k8s集群详细教程——亲测可用！！网上其他教程均有问题！

【云原生】在Ubuntu18/20上部署Kubernetes/k8s集群详细教程——亲测可用！！网上其他教程均有问题！

在Ubuntu18/20上部署Kubernetes/k8s详细教程一、设置Docker二、安装Kubernetes第 1 步&#xff1a;添加Kubernetes签名密钥第 2 步&#xff1a;添加软件存储库第 3 步&#xff1a;Kubernetes 安装工具三、部署 Kubernetes步骤 1&#xff1a;准备 Kubernetes 部署步骤 2&#xf…
阅读更多...
怎么找回笔记本的数据？笔记本数据恢复，6个教程

怎么找回笔记本的数据？笔记本数据恢复，6个教程

“我不小心删除了笔记本电脑里面的重要数据&#xff0c;请问被误删的数据还可以恢复吗&#xff1f;如果可以恢复&#xff0c;我应该怎么恢复笔记本里面的数据&#xff1f;” 很多人在使用笔记本电脑的时候&#xff0c;经常误删一些数据&#xff0c;有时是工作文档&#xff0c;…
阅读更多...
我是如何将同事的代码改成DDD风格的

我是如何将同事的代码改成DDD风格的

DDD是领域驱动设计的简写。前段时间听群友说行业里少有DDD的代码案例&#xff0c;进而对DDD没有一个感性的认识。我想这是行业里普遍存在的现象吧。所以&#xff0c;就有了写此文的想法。文章标题说的是“同事的代码”&#xff0c;其实只是为了让此文更具传播&#xff0c;没别的…
阅读更多...
组件的生命周期、vue2中使用axios、插槽

组件的生命周期、vue2中使用axios、插槽

目录 一、组件的生命周期 1、什么是组件的生命周期 2、生命周期函数 3、生命周期的阶段划分 4、钩子函数 5、keep-alive组件 6、生命周期函数&#xff1a; 二、vue2中使用axios 1、axios&#xff1a;是一个基于Promise的网络请求库。既可以在node.js&#xff08;服务器…
阅读更多...
【MySQL】1. 了解数据库以及MySQL安装

【MySQL】1. 了解数据库以及MySQL安装

了解数据库和SQL什么是数据库为什么使用数据库MySQL下载,安装,配置客户端连接MySQL方法一方法二SQLSQL分类SQL的基本规则命名规则最后大家好, 我是路不停_。 上学期学校学习了MySQL之后,课后也没有做很多总结,加上课时紧凑,后续考试也是考前草草备考了一下. 最近读了本MySQL必知…
阅读更多...
C 程序设计教程（03）—— C 语言的数据类型（一）：基本数据类型

C 程序设计教程（03）—— C 语言的数据类型（一）：基本数据类型

C 程序设计教程&#xff08;03&#xff09;—— C 语言的数据类型&#xff08;一&#xff09;&#xff1a;基本数据类型 一、数据类型简介 C 语言提供了丰富的数据类型&#xff0c;每一个常量和变量必须属于某一种数据类型。C 语言中的数据类型如下&#xff1a; &#xff08…
阅读更多...
基础数学（八）——期末考试复习

基础数学（八）——期末考试复习

文章目录考试要求考试内容简单复习插值拟合和回归数值积分直接法迭代法非线性方程求根微分方程数值解去年考题第一题&#xff0c;插值&#xff08;12分&#xff09;第二题&#xff0c;回归和拟合第三题&#xff0c;数值积分第四题&#xff0c;线性方程组求解第五题&#xff0c;…
阅读更多...
MGRE实验配置（华为）

MGRE实验配置（华为）

华为ENSP的MGRE实验&#xff1a; 建立好拓扑图 之后就是对各个路由器的配置&#xff1a; R2配置&#xff1a; int s3/0/0 link-protocol hdlc 更改接口为hdlc认证 ip address 12.1.1.2 24 int lo0 ip add 2.2.2.2 24 int s3/0/1 [r2-Serial3/0/1]ip address 23.1.1.2 24 [r2-Se…
阅读更多...
【ML】 基本概念

【ML】 基本概念

ML 基本概念1. different types of functions2. how to find the function - training data3. unseen during training4. Back to ML Framework4.1 Step1: function with unknown4.2 Step2: define loss from training data4.3 step3: optimization4.4 其他4.4.1 Sigmoid → Re…
阅读更多...
基础算法（五）——双指针算法

基础算法（五）——双指针算法

双指针算法 介绍 双指针算法分为两大类&#xff1a; 两个指针指向两个不同序列&#xff0c;用两个指针维护某一种逻辑&#xff0c;例如归并排序 两个指针指向一个序列&#xff0c;即用两个指针维护一段区间&#xff0c;例如快排 核心思想&#xff1a; 若能证明出题目存在…
阅读更多...
Linux工具学习之【vim】

Linux工具学习之【vim】

✨个人主页&#xff1a; Yohifo &#x1f389;所属专栏&#xff1a; Linux学习之旅 &#x1f38a;每篇一句&#xff1a; 图片来源 &#x1f383;操作环境&#xff1a; CentOS 7.6 阿里云远程服务器 Whatever is worth doing is worth doing well. 任何值得去做的事情&#xff0…
阅读更多...
springboot垃圾分类查询管理系统

springboot垃圾分类查询管理系统

1.介绍 垃圾分类查询管理系统&#xff0c;对不懂的垃圾进行查询进行分类并可以预约上门回收垃圾。 让用户自己分类垃圾&#xff0c; 按国家标准自己分类&#xff0c; 然后在网上提交订单&#xff0c; 专门有人负责回收&#xff0c; 统一回收到垃圾处理站&#xff0c; 然后工人…
阅读更多...
Renesas 3 --烧写

Renesas 3 --烧写

1.烧录Boot程序 1.1&#xff0c;连接RESET_OUT, TOOL0, GND到板子。 1.2&#xff0c;上电后烧录器上指示灯亮&#xff08;假如不亮&#xff0c;重新上电烧录器&#xff09; 1.3&#xff0c;用Renesas flash programmer来烧写软件&#xff08;新建项目&#xff0c;然后保存项目…
阅读更多...
RAW怎么转为JPG？这些转换技巧值得收藏

RAW怎么转为JPG？这些转换技巧值得收藏

相信大多数的人&#xff0c;出去外面游玩时都喜欢使用相机来拍照&#xff0c;但是大多数相机拍出来的照片都是RAW格式&#xff0c;图片传到电脑时&#xff0c;会因为格式的不兼容而导致无法查看&#xff0c;这个时候我们就需要把图片的格式进行转换&#xff0c;例如我们将其转换…
阅读更多...
Day850.GuardedSuspension模式 -Java 性能调优实战

Day850.GuardedSuspension模式 -Java 性能调优实战

GuardedSuspension模式 Hi&#xff0c;我是阿昌&#xff0c;今天学习记录的是关于GuardedSuspension模式的内容。 小灰工作中遇到一个问题&#xff0c;开发了一个 Web 项目&#xff1a;Web 版的文件浏览器&#xff0c;通过它用户可以在浏览器里查看服务器上的目录和文件。 这…
阅读更多...
（原创）Flow数据流的使用

（原创）Flow数据流的使用

前言 这篇文章主要介绍Flow的一些基础使用方法 同时介绍如何用Flow请求网络数据 下面开始&#xff01; 什么是Flow Flow翻译过来&#xff0c;是“流”的意思 举例说明&#xff0c;在大自然中&#xff0c;常见的如水流 是从高往低流动的 那么在计算机世界里&#xff0c;所谓的…
阅读更多...
loss盘点: asl loss (Asymmetric Loss) 代码解析详细版

loss盘点: asl loss (Asymmetric Loss) 代码解析详细版

1. BCE公式部分 可以简单浏览下这篇博客的文章&#xff1a; https://blog.csdn.net/qq_14845119/article/details/114121003 这是多分类 经典 BCELossBCELossBCELoss 公式 L−yL−(1−y)L−L -y L_{} - (1-y) L_{-} L−yL​−(1−y)L−​ 其中&#xff0c;L/−L_{/-}L/−​…
阅读更多...
Docker保姆级学习教程

Docker保姆级学习教程

文章目录1、什么是Docker1.1、容器技术1.2、容器与虚拟机比较1.3、Docker特点1、更高效的利用系统资源2、更快速的启动时间3、一致的运行环境4、持续支付和部署5、更轻松的迁移6、更轻松的维护和扩展2、Docker组件学习2.1、Docker客户端和服务器2.2、Docker镜像2.3、Registry&a…
阅读更多...
奇怪的知识——Windows下怎么修改进程的名称？

奇怪的知识——Windows下怎么修改进程的名称？

&#x1f4e2;欢迎点赞 &#xff1a;&#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff0c;赐人玫瑰&#xff0c;手留余香&#xff01;&#x1f4e2;本文作者&#xff1a;由webmote 原创&#x1f4e2;作者格言&#xff1a;无尽的折腾后&#xff0c;终于又回到…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023