React中使用 react-router-dom 路由传参的三种方式详解【含V5.x、V6.x】！！！
2024-10-19 11:51:13
路由传值的三种方式（v5.x）
params参数
//路由链接(携带参数)：
<Link to='/demo/test/tom/18'}>详情</Link>
//或 <Link to={{ pathname:'/demo/test/tom/18' }}>详情</Link>
//注册路由(声明接收)：
<Route path="/demo/test/:name/:age" component={Test}/>
//接收参数：
this.props.match.params
search参数
//路由链接(携带参数)：
<Link to='/demo/test?name=tom&age=18'}>详情</Link>
//注册路由(无需声明，正常注册即可)：
<Route path="/demo/test" component={Test}/>
//接收参数：
this.props.location.search
//备注：获取到的search是urlencoded编码字符串(例如: ?id=10&name=zhangsan)，需要借助query-string解析参数成对象
state参数
//路由链接(携带参数)：
<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
//注册路由(无需声明，正常注册即可)：
<Route path="/demo/test" component={Test}/>
//接收参数：
this.props.location.state
//备注：刷新也可以保留住参数
路由传值的三种方式（v6.x）
params参数
//路由链接(携带参数)：
<Link to={{ pathname:`/b/child1/${id}/${title}` }}>Child1</Link>
//或 <Link to={`/b/child1/${id}/${title}`}>Child1</Link>
//注册路由(声明接收)：
<Route path="/b/child1/:id/:title" component={Test}/>
//接收参数：
import { useParams } from "react-router-dom";
const params = useParams();
//params参数 => {id: "01", title: "消息1"}
search参数
//路由链接(携带参数)：
<Link className="nav" to={`/b/child2?age=20&name=zhangsan`}>Child2</Link>
//注册路由(无需声明，正常注册即可)：
<Route path="/b/child2" component={Test}/>
//接收参数方法1：
import { useLocation } from "react-router-dom";
import qs from "query-string";
const { search } = useLocation();
//search参数 => {age: "20", name: "zhangsan"}
//接收参数方法2：
import { useSearchParams } from "react-router-dom";
const [searchParams, setSearchParams] = useSearchParams();
// console.log( searchParams.get("id")); // 12
//备注：获取到的search是urlencoded编码字符串(例如: ?age=20&name=zhangsan)，需要借助query-string解析参数成对象
state参数
//通过Link的state属性传递参数
<Link
className="nav"
to={`/b/child2`}
state={{ id: 999, name: "i love merlin" }}
>
Child2
</Link>
//注册路由(无需声明，正常注册即可)：
<Route path="/b/child2" component={Test}/>
//接收参数：
import { useLocation } from "react-router-dom";
const { state } = useLocation();
//state参数 => {id: 999, name: "我是梅琳"}
//备注：刷新也可以保留住参数
兄弟姐妹们，点波关注吧，一起分享有趣的技术！
segmentfault 思否： https://segmentfault.com/u/jasonma1995/articles 全部原创好文
最新文章
- Machine Learning Algorithms Study Notes(6)—遗忘的数学知识
- Jquery揭秘系列：ajax原生js实现
- python27 windows 下三种安装第三方库的办法
- Qt 程序运行图标
- 递推，动态规划(DP)，字符串处理，最佳加法表达式
- Scala学习笔记（二）表达式和函数
- poj3278 BFS入门
- shell中的for、while、until
- MyBatis使用DEMO及cache的使用心得
- php中get_headers函数的作用及用法的详细介绍
- 快速排序(QuickSort)
- Random Erasing Augmentation（REA）
- Android 基础一 TextView，Style样式，Activity 传值，选择CheckBox 显示密码
- Chrome Inspect不显示Webview页面的问题总结
- Python Web开发框架Django
- （转）如何修复ubuntu的UEFI引导
- e788. 取消JSpinner的键盘编辑能力
- wxWidgets：菜单
- [转帖]真TM长的:SQL Server 2008存储结构——GAM和SGAM、PFS结构、IAM结构、DCM&BCM
- MySQL常用shell语句