当前位置: 首页 > Web前端 > JavaScript

React【含V5.x、V6.x】中react-router-dom路由参数的三种使用方法详解!!!

时间:2023-03-27 00:45:45 JavaScript

路由值的三种方式(v5.x)params参数//路由链接(携带参数):details//orDetails//注册路由(接收语句)://接收参数:this.props.match.paramssearch参数//路由链接(携带参数):详情//注册路由(不用声明,正常注册即可)://接收参数:this.props.location.search//备注:得到的search是一个urlencoded编码字符串(例如:?id=10&name=zhangsan),需要使用query-string将参数解析成对象状态参数//路由链接(携带参数):Details//注册路由(无需声明,正常注册即可)://接收参数:this.props.location.state//备注:刷新还可以保留参数路由和传值三种方式(v6.x)paramsparameter//路由链接(携带参数):Child1//或Child1//注册路由(声明接收)://接收参数:import{useParams}from"react-router-dom";constparams=useParams();//paramsparameter=>{id:"01",title:"Message1"}搜索参数//路由链接(携带参数):Child2//注册路由(无需声明,正常注册即可)://接收参数方法一:import{useLocation}from"react-router-dom";importqsfrom"query-string";const{search}=useLocation();//搜索参数=>{age:"20",name:"zhangsan"}//接收参数方法二:import{useSearchParams}from"react-router-dom";const[searchParams,setSearchParams]=useSearchParams();//console.log(searchParams.get("id"));//12//备注:得到的search是一个urlencoded编码的字符串(例如:?age=20&name=zhangsan),需要用query-string将参数解析成对象状态参数//通过stateattributeofLinkChild2//注册路由(没有需要申报,正常注册即可)://接收参数:import{useLocation}from"react-router-dom";const{state}=useLocation();//stateparameter=>{id:999,name:"我是美林"}//备注:刷新也可以保留参数。兄弟姐妹们,关注我们,一起分享有趣的技术吧!掘金:https://juejin.cn/user/303430...所有原创好文CSDN:https://blog.csdn.net/qq_4275...所有原创好文:https://www.jianshu。com/u/460...全部原创好文segmentfault认为:https://segmentfault.com/u/ja...全部原创好文博客园:https://www.cnblogs.com/Jason...全部原创好文章