react更改路由入参_react怎么路由传参？

react路由传参(4种方式)

1、通过params传参(刷新页面后参数不消失，参数会在地址栏显示)

路由页面： //注意要配置 /:id

路由跳转并传递参数：链接方式：XX

//或：

XXjs方式：this.props.history.push('/demo/'+'6')

//或：

this.props.history.push({pathname:'/demo/'+'6'})

获取参数：this.props.match.params.id //注意这里是match而非history

params传参(多个动态参数)state={

id:88,

name:'Jack',

}

路由页面：

路由跳转并传递参数：链接方式：XXjs方式：this.props.history.push({pathname:`/demo/${this.state.id}/${this.state.name}`})

获取参数：this.props.match.params //结果 {id: "88", name: "Jack"}

2、通过query传参(刷新页面后参数消失)

路由页面： //无需配置

路由跳转并传递参数：链接方式：XXjs方式：this.props.history.push({pathname:'/demo',query:{id:22,name:'dahuang'}})

获取参数：this.props.location.query.name

优势：传参优雅，传递参数可传对象；

缺点：刷新地址栏，参数丢失

3、通过state传参( 刷新页面后参数不消失，state传的参数是加密的，比query传参好用)

路由页面： //无需配置

路由跳转并传递参数：链接方式：XXjs方式：this.props.history.push({pathname:'/demo',state:{id:12,name:'dahuang'}})

获取参数：this.props.location.state.name

优缺点同query

4、通过search

路由页面：

路由跳转并传递参数：链接方式：xxxjs方式：this.props.history.push({pathname:"/web/departManange?tenantId" + row.tenantId});

读取参数用:this.props.location.search

优缺点同params

react更改路由入参_react怎么路由传参？相关推荐

路由之间的转跳及传参
跳转路由之间的转跳可以通过两种方式实现: 1.通过官方提供的router-link标签实现,它与a标签相似,给我们提供跳转到某个路由的功能. 用法: <router-link to=" ...
vue组件间通信传递数据的四种方式（路由传参、父子组件传参、兄弟组件传参、深层次传参）
前言: vue组件间通信对于经常来写vue的伙伴来说应该是很轻松的,对于一些刚入门的伙伴来说可能就有些迷茫,感觉方式有很多种,但是总结起来又不知道应该怎么说,在下面的文章中,我结合自己的开发过程中经常 ...
java void传参,Java中的传参
变量有两种类型根本类型和类类型参数也是变量,所以传参分为根本类型传参类类型传参过程1:根本类型传参根本类型传参在办法内,无法修改办法外的根本类型参数 publicclassHero{ St ...
C/C++ 一维数组的传参/一级指针的传参二维数组的传参/二级指针的传参三维数组的传参/三级指针的传参方法总结分析终极篇
序最近复习c/c++数组的传参,发现了一些问题,下面是一些总结和思考正文一维数组的传参/一级指针的传参/普通指针在理解指针的基础上,一维数组的指针传递很简单,我们知道数组的数组名就是这个数组首 ...
vue 组件之间传值父转子，子传父，同级别之间的传参，跨级别传参
写这篇文章之前,我对vue组件之间的传值,还是只知道一些基础的传值方式.虽然工作中勉强能够应对,但是想要行云流水感觉还是心有余而力不足,所以在此,我想总结一下vue组件之间的一些传值方式供大家参考,同 ...
路由声明式传参和编程式传参
声明式传参(使用带href /或本质上是a标签的时候) 直接带路径里带携带参数下例在地址栏是可以看到参数的(querys传参) 在vue.tools插件里可以观察到取出路径参数的方式 param ...
react 子传参父_react子父传参有几种方法？
react子父传参有几种方法?下面本篇文章给大家介绍一下react父子组件传参(值)的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. react父子组件传参(值)的几种方法一 ...
@query传参_vue-router中params传参和query传参的区别及处理方法
在 Vue 实例内部,你可以通过 $router 访问路由实例.因此你可以调用 this.$router.push 想要导航到不同的 URL,则使用 router.push 方法.这个方法会向 his ...
php 闭包函数传参,PHP闭包函数传参及使用外部变量 PHP闭包函数传参及使用外部变量的方法...
想了解PHP闭包函数传参及使用外部变量的方法的相关内容吗,小谈博客在本文为您仔细讲解PHP闭包函数传参及使用外部变量的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:PHP,闭包函数,传参, ...

react更改路由入参_react怎么路由传参？

react更改路由入参_react怎么路由传参？相关推荐

最新文章

热门文章