React路由传参方法

最新推荐文章于 2025-09-19 20:36:42 发布

原创最新推荐文章于 2025-09-19 20:36:42 发布 · 438 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

react 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了React中四种常见的路由传参方法：params、search、query和state。通过示例代码展示了如何使用它们进行参数传递及读取，并分析了各自的优缺点。params和search在刷新页面后仍能保留参数，但params只适合传字符串，搜索参数可能会使URL变得冗长；query传参优雅，支持对象，但刷新后参数丢失；state和query类似，但刷新后数据不保留。

React路由传参方法

params
state
query
search

一、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会变得长而丑陋。

二、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

三、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

优点：传参优雅，传递参数可传对象；
缺点：刷新地址栏，参数丢失

四、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