【React-Router】导航传参

1. searchParams 传参

// @/page/Login/index.js
import { Link, useNavigate } from 'react-router-dom'
const Login = () => {const navigate = useNavigate()return <div>登录页<button onClick={() => navigate('/article?id=91&name=jk')}>searchParams 传参</button></div>
}export default Login
// @/page/Article/index.js
import { useSearchParams } from "react-router-dom";
const Article = () => {
const [params] = useSearchParams();const id = params.get('id');const name = params.get('name');return <div>文章页,接收参数{id}-{name}</div>
}export default Article

image.png

2. params 传参

// @/page/Login/index.js
import { Link, useNavigate } from 'react-router-dom'
const Login = () => {const navigate = useNavigate()return <div>登录页<button onClick={() => navigate('/article/91/jk')}>Params 传参</button></div>
}export default Login
// @/page/Article/index.js
import { useParams, useSearchParams } from "react-router-dom";
const Article = () => {const params = useParams()const id = params.idconst name = params.namereturn <div>文章页,接收参数{id}-{name}</div>
}export default Article
// @/router.index.js
import Login from '../page/Login'
import Article from '../page/Article'
import { createBrowserRouter } from 'react-router-dom'
const router = createBrowserRouter([{path: '/login',element: <Login></Login>},{// `/:id/:name` 占位符path: '/article/:id/:name',element: <Article></Article>},{path: '/',element: <Login></Login>}
])export default router

image.png

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

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

相关文章

SpringBoot中使用注解的方式创建队列和交换机

SpringBoot中使用注解的方式创建队列和交换机 前言 最开始蘑菇博客在进行初始化配置的时候&#xff0c;需要手动的创建交换机&#xff0c;创建队列&#xff0c;然后绑定交换机&#xff0c;这个步骤是非常繁琐的&#xff0c;而且一不小心的话&#xff0c;还可能就出了错误&…

phpinfo中的重要信息

phpinfo中的重要信息 1.PHP/操作系统版本信息2.Configuration File(ini配置文件位置)3.Registered PHP Streams(支持的流)4.Registered Stream Filters(支持的流过滤器)5.allow_url_fopen&allow_url_include6.disable_functions7.display_errors8.include_path9.open_based…

【OpenCV实现图像:使用OpenCV进行物体轮廓排序】

文章目录 概要读取图像获取轮廓轮廓排序小结 概要 在图像处理中&#xff0c;经常需要进行与物体轮廓相关的操作&#xff0c;比如计算目标轮廓的周长、面积等。为了获取目标轮廓的信息&#xff0c;通常使用OpenCV的findContours函数。然而&#xff0c;一旦获得轮廓信息后&#…

Java8新特性 ----- Lambda表达式和方法引用/构造器引用详解

前言 在讲一下内容之前,我们需要引入函数式接口的概念 什么是函数式接口呢? 函数式接口&#xff1a;有且仅有一个抽象方法的接口 java中函数式编程的体现就是Lambda表达式,你可以认为函数式接口就是适用于Lambda表达式的接口. 也可以加上注解来在编译层次上限制函数式接口 Fun…

视频云存储EasyCVR平台国标接入获取通道设备未回复是什么原因?该如何解决?

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…

【mysql】1153 - Got a packet bigger than ‘max_allowed_packet‘ bytes

执行mysql 语句出现&#xff1a;1153 - Got a packet bigger than max_allowed_packet bytes&#xff1b; 1153-得到一个大于“max_allowed_packet”字节的数据包。 数据包太大了怎么办。该配置吧。 查看max_allowed_packet show global variables like max_allowed_packet;…

Java SPI机制

目录 什么是spi API与SPI区别 SPI实现案例 SPI应用场景 1. JDBC场景 2. ShardingSphere场景 3. Spring 场景 4. SLF4J 日志门面 场景 Java.util.spi下提供了SPI机制&#xff0c;SPI机制&#xff08;Service Provider Interface)其实源自服务提供者框架&#xff08;Serv…

IT变更管理实现服务台高效协同

在当今数字化时代&#xff0c;IT变更管理是IT管理员在服务台中必须面对的重要挑战之一。随着技术的不断发展和市场的快速变化&#xff0c;管理员需要定期进行IT系统和流程的变更&#xff0c;在确保业务稳定性的同时还需提高效率和准确率。 1、全方位的变更计划 IT中应该有一个全…

[开源]Web端的P2P文件传输工具,简单安全高效的P2P文件传输服务

一、开源项目简介 小鹿快传 - 在线P2P文件传输工具 小鹿快传是一款Web端的P2P文件传输工具&#xff0c;使用了WebRTC技术实现P2P连接和文件传输。 二、开源协议 使用MIT开源协议 三、界面展示 产品截图 四、功能概述 简单安全高效的P2P文件传输服务 小鹿快传是一款Web端…

虚拟摇杆OnJoystickMove未被调用,角色不移动

更改interaction type 为 event notification

12、人工智能、机器学习、深度学习的关系

很多年前听一个机器学习的公开课,在Q&A环节,一个同学问了老师一个问题“机器学习和深度学习是什么关系”? 老师先没回答,而是反问了在场的同学,结果问了2-3个,没有人可以回答的很到位,我当时也是初学一脸懵,会场准备的小礼品也没有拿到。 后来老师解释“机器学习和…

回转窑无线测温系统解决方案

方案概述&#xff08;以回转窑监测为例&#xff09; 回转窑通常使用在热电厂、钢铁厂、冶金厂及干燥设备行业。而这些行业一般具有高温、潮湿、粉尘、高压、不便布线或现场无法提供电源等环境特点。同时&#xff0c;回转窑在工作中&#xff0c;具有旋转、高温等特点。为此&…

技术or管理?浅谈测试人员的未来职业发展

我们在工作了一段时间之后&#xff0c;势必会感觉到自己已经积累了一些工作经验了&#xff0c;会开始考虑下一阶段的职业生涯会如何发展。测试人员在职业生涯中的不确定因素还是不少的&#xff0c;由于其入门门槛不高&#xff0c;不用学习太多技术性知识即可入行&#xff0c;所…

RubbleDB: CPU-Efficient Replication with NVMe-oF

RubbleDB: CPU-Efficient Replication with NVMe-oF 前言 这是ATC2023的文章&#xff0c;作者来自哥伦比亚大学这篇工作在LSM-tree多副本存储的场景下&#xff0c;利用NVMe-oF技术避免了LSM-tree副本上的重复合并&#xff0c;减少了CPU开销。 Introduction 为了提供高可用性…

VR全景校园:不被简单定义的校园展示,看的不止“一面”

学校的宣传&#xff0c;还是仅仅依靠一部宣传片来定义的吗&#xff1f;如今&#xff0c;在这个时代&#xff0c;VR全景技术已经越来越成熟了&#xff0c;并逐渐融入了我们的日常生活中&#xff0c;通过VR全景校园&#xff0c;我们可以在网上真实地感受校园的优美环境&#xff0…

Windows + VS2022超详细点云库(PCL1.8.1)配置

本文在结合多位CSDN大佬的步骤&#xff0c;记录以下最全的点云配置过程&#xff0c;防止走弯路&#xff08;并在最后配上PCL环境配置成功的测试代码-彩色兔子&#xff09; 一、PCL介绍 PCL概述_pcl技术_一杯盐水的博客-CSDN博客 二、准备工作&#xff08;PCL版本的下载&…

metersphere 创建场景, 自动动态变换参数值,实现接口自动化测试。

创建场景 创建产品变量 添加数值 添加后点击确定 点击右下角 号 点击 循环控制器 写循环 创建/导入接口 选择运行环境&#xff0c; 没有的话新建一个 需要点击引用环境 保存后点击 调试 成功做到每次请求的参数是列表里的 10

怎么提高拍摄视频画质和清晰度?这几个方法一定要学会

一、提高拍摄视频画质和清晰度 1、分辨率 分辨率就是我们常说的480P、720P、1080P、4K等等&#xff0c;分辨率越大&#xff0c;在某种程度上视频也就越清晰。虽然原理是这样的&#xff0c;但在不同平台上传视频也会影响最终的画质。 比如超高分辨率的视频不适合在某音。因为…

BUUCTF [BJDCTF2020]纳尼 1

BUUCTF:https://buuoj.cn/challenges 题目描述&#xff1a; 得到的 flag 请包上 flag{} 提交。来源&#xff1a;https://github.com/BjdsecCA/BJDCTF2020 密文&#xff1a; 下载附件&#xff0c;解压得到6.gif和题目.txt文件。 解题思路&#xff1a; 1、查看题目.txt文件&a…

网络知识学习(笔记二)

ios模型规定的网络模型一共有7层&#xff0c;但是实际使用过程中&#xff0c;4层的TCP/IP模型是经常使用的&#xff0c;网络知识学习笔记里面也是基于4层TCP/IP模型进行分析的&#xff0c;前面已经讲了&#xff1a;&#xff08;1&#xff09;物理层&#xff0c;&#xff08;2&a…