react路由传参数

Posted Jmytea

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react路由传参数相关的知识,希望对你有一定的参考价值。

react路由传参数

1.params

<Route path='/path/:name' component={Path}/>
<link to="/path/2">xxx</Link>
this.props.history.push({pathname:"/path/" + name});
读取参数用:this.props.match.params.name

优势 : 刷新地址栏,参数依然存在
缺点:只能传字符串,并且,如果传的值太多的话,url会变得长而丑陋。

2.query

<Route path='/query' component={Query}/>
<Link to={{ path : ' /query' , query : { name : 'sunny' }}}>
this.props.history.push({pathname:"/query",query: { name : 'sunny' }});

读取参数用: this.props.location.query.name
优势:传参优雅,传递参数可传对象;
缺点:刷新地址栏,参数丢失

3.state

<Route path='/sort ' component={Sort}/>
<Link to={{ path : ' /sort ' , state : { name : 'sunny' }}}> 
this.props.history.push({pathname:"/sort ",state : { name : 'sunny' }});

读取参数用: this.props.location.query.state
优缺点同query

4.search

<Route path='/web/departManange ' component={DepartManange}/>
<link to="web/departManange?tenantId=12121212">xxx</Link>
this.props.history.push({pathname:"/web/departManange?tenantId" + row.tenantId});

读取参数用: this.props.location.search
优缺点同params

以上是关于react路由传参数的主要内容,如果未能解决你的问题,请参考以下文章

react路由传参数

在 Navigate Tag React 路由器 v6 中将参数传递给字符串

react传值,路由

React中路由传参及接收参数的方式

node-koa-路由传值

this.props 的神奇用法(路由传参)