react-router-dom@6获取路由传参

目录

参数获取

1、子路由形式携带

2、问号(?)形式参数

3、事件跳转传参


router/index.tsx

import App from "App";
import Home from "pages/Home";
import List from "pages/List";
import Detail from "pages/Detail";
import About from "pages/About";
import Login from "pages/Login";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";const MyRouter = () => (<Router><Routes><Route path="/" element={<App />}><Route index element={<Home />}></Route><Route path="/list/" element={<List />}></Route><Route path="/list/:id" element={<List />}></Route><Route path="/detail" element={<Detail />}></Route><Route path="/about" element={<About />}></Route></Route><Route path="/login" element={<Login />}></Route></Routes></Router>
);export default MyRouter;

App.tsx

import React from "react";
import { Outlet, Link } from "react-router-dom";function App() {return (<div><ul><li><Link to={"/list"}>列表页(不带id)</Link></li><li><Link to={"/list/456"}>列表页(带id)</Link></li><li><Link to={"/detail?id=123"}>详情页</Link></li><li><Link to={"/about"}>关于我们</Link></li></ul><Outlet /></div>);
}export default App;

参数获取

1、子路由形式携带

如上面代码的点击列表页带id "/list/456" 跳转列表页

<Route path="/list/:id" element={<List />}></Route>

此时可以使用React Router Dom提供的Hook  useParams  在列表页获取:

List.tsx

import React from "react";
import { useParams } from "react-router-dom";export default function List() {const { id } = useParams();return (<div><h1>列表 - id: {id}</h1><h1>yusir</h1></div>);
}

2、问号(?)形式参数

<Link to={"/detail?id=123"}>详情页</Link>

点击携带参数进入详情页

此时可以使用React Router Dom提供的Hook  useSearchParams 在详情页获取:

Detail.tsx

import React from "react";
import { useSearchParams } from "react-router-dom";export default function Detail() {const [params] = useSearchParams();console.log(params.getAll('id'))    // ['123']let myId = params.getAll("id")[0];return (<div><h1>Detail - id: {myId}</h1><h1>yusir</h1></div>);
}

3、事件跳转传参

事件中执行跳转页面,可以使用useNavigate这个hook进行跳转。

 

 

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

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

相关文章

图灵奖得主(二)

本文转自&#xff1a;http://bbs.gxnu.edu.cn/bbsanc.php?path%2Fgroups%2FGROUP_5%2FProgramming%2Fother%2FM.1029997222.A 1987年度的图灵奖授予了IBM沃特森研究中心老资格的研究员 约翰科克(Johncocke)。 科克是从机械到数学、又从数学转到 计算机方向上来的学者。…

jQuery效果之滑动

jQuery 滑动方法有三种&#xff1a;slideDown()、slideUp()、slideToggle()。 jQuery slideDown() 方法用于向下滑动元素&#xff0c; 语法&#xff1a;$(selector).slideDown(speed,callback); 可选的 speed 参数规定效果的时长。它可以取以下值&#xff1a;"slow"、…

Error: This command has to be run with superuser privileges (under the root user on most systems).

意思是错误&#xff1a;此命令必须以超级用户权限&#xff08;在大多数系统上以root用户权限&#xff09;运行。所以当前的用户是普通用户&#xff0c;需要切换为超级用户&#xff08;root用户&#xff09;先输入在命令行中输入 su root 然后会出现Password&#xff1a;&#…

图灵奖得主(三)

本文转自&#xff1a;本文转自&#xff1a;http://bbs.gxnu.edu.cn/bbsanc.php?path%2Fgroups%2FGROUP_5%2FProgramming%2Fother%2FM.1029997222.A 继1979年度图灵奖首次授予一位加拿大学者K.E.Iverson之后&#xff0c; 1989年度的图灵 奖又一次授予加拿大学者威廉凯亨(Willia…

对微信公共号的理解

通过redirect_uri获取code 通过code和appid 获取access_token 进行鉴权 转载于:https://www.cnblogs.com/zhouyideboke/p/11309752.html

vue3 v-model变化

概览 就变化内容而言&#xff0c;此部分属于高阶内容&#xff1a; 非兼容&#xff1a;用于自定义组件时&#xff0c;v-model的 prop 和事件默认名称已更改&#xff1a; prop&#xff1a;value -> modelValue&#xff1b;event&#xff1a;input -> update:modelValue&a…

图灵奖得主(四)

本文转自&#xff1a;本文转自&#xff1a;本文转自&#xff1a;http://bbs.gxnu.edu.cn/bbsanc.php?path%2Fgroups%2FGROUP_5%2FProgramming%2Fother%2FM.1029997222.A 1991年度的图灵奖授予了爱丁堡大学计算机科学系教授罗 宾米尔纳(Robin Milner)。米尔纳是继M.V.Wilkes(1…

sql 日期类型空值等于 1900-01-01

SQL server 中查询&#xff1a;select cast( as datetime) 结果&#xff1a;1900-01-01 00:00:00.000 做为判断条件的话&#xff0c;要注意。不能直接 转载于:https://www.cnblogs.com/meng9527/p/11311765.html

koa洋葱模型

Koa 和 Express 都会使用到中间件 Express的中间件是顺序执行&#xff0c;从第一个中间件执行到最后一个中间件&#xff0c;发出响应如上图 Koa是从第一个中间件开始执行&#xff0c;遇到 next 进入下一个中间件&#xff0c;一直执行到最后一个中间件&#xff0c;在逆序&#x…

图灵奖得主(五)

[1993]斯坦恩斯--"打工"带来的机遇 斯坦恩斯是学数学出身的。1958年他在卡尔顿学院(Carlton College)取 得数学学士学位后进入普林斯顿大学研究生院&#xff0c;用了3年时间就 取得博士学位&#xff0c;其博士论文课题是关于博奕论的。 斯坦恩斯跨进计算机科…

koa后端允许跨域

举个例子 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewport" content"widthdevice-width…

python面向对象之继承

面向对象之继承 什么是面向对象的继承&#xff1f; 继承&#xff08;英语&#xff1a;inheritance&#xff09;是面向对象软件技术当中的一个概念。如果一个类别A“继承自”另一个类别B&#xff0c;就把这个A称 为“B的子类别”&#xff0c;而把B称为“A的父类别”也可以称“B是…

美国正面临“人才泡沫”破裂危机?

&#xff08;Jason Lane和Kevin Kinser/文&#xff09;最近&#xff0c;与教育有关的种种问题在美国社会引起了广泛讨论。首先巨额的学生贷款问题&#xff1a;根据美联储纽约分行在2012年11月发布的一份报告&#xff0c;全美学生贷款总额已经达到420亿美元&#xff0c;其中新增…

ngrx学习笔记

什么是ngrx ngrx是Angular基于Rxjs的状态管理&#xff0c;保存了Redux的核心概念&#xff0c;并使用RxJs扩展的Redux实现。使用Observable来简化监听事件和订阅等操作。 在看这篇文章之前&#xff0c;已经假设你已了解rxjs和redux。 有条件的话请查看官方文档进行学习理解。 所…

解决RM删除没有释放空间问题

www172-18-8-12 log]$ df -h Filesystem Size Used Avail Use% Mounted on/dev/vda1 120G 101G 20G 84% /devtmpfs 7.8G 0 7.8G 0% /devtmpfs 7.8G 0 7.8G 0% /dev/shmtmpfs 7.8G 601M 7.2G 8% /run 我删除文件时&#xff0c;直接用的rm 没有加参数lf,结果空间没有释放 文件已经…

.slice(0)

高手代码里看到.slice(0)&#xff0c;查了下这样写的好处&#xff1a; 1.对原数组进行深拷贝&#xff0c;这样进行一系列操作的时候就不影响原数组了&#xff1b; 2.将类数组对象转化为真正的数组对象&#xff1a;var anchorArray [].slice.call(document.getElementsByTagN…

在线课程学习、科研科技视频网站

最近在网络学习课程&#xff0c;发现很多在线课程网站&#xff0c;与大家分享一下。本人新浪博客&#xff1a;http://blog.sina.com.cn/u/1240088994 公开课课程图谱http://coursegraph.com/navigation/ 1. 网易公开课 http://open.163.com/&#xff1b; 网易TED http://…

对html2canvas的研究

介绍 该脚本允许您直接在用户浏览器上截取网页或部分网页的“屏幕截图”。屏幕截图基于DOM&#xff0c;因此它可能不是真实表示的100&#xff05;准确&#xff0c;因为它没有制作实际的屏幕截图&#xff0c;而是根据页面上可用的信息构建屏幕截图。 这个怎么运作 该脚本遍历其加…

[Vue warn]: You are using the runtime-only build of Vue 牵扯到Vue runtime-compiler与runtime-only区别

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. 1. Vue的编译渲染过程 template --> ast --> render函数 -…

亲历2013年TED大会:全球最潮灵感大会

本文转自&#xff1a;http://mooc.guokr.com/opinion/436837/ 本文由《外滩画报》供稿 文/华琪&#xff08;发自美国&#xff09; 编辑/吴慧雯 什么是TED的世界&#xff1f;在这里&#xff0c;你可以轻易发现各种名人出没的痕迹&#xff0c;和各个领域里最具远见卓识和创造…