React路由传参 -- ( params, query, state, search)

最新推荐文章于 2024-04-26 17:20:20 发布

转载最新推荐文章于 2024-04-26 17:20:20 发布 · 5k 阅读

11 ·

CC 4.0 BY-SA版权

原文链接：https://www.jianshu.com/p/ad8cc02b9e6c

文章标签：

#react

前端专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了React中四种路由参数传递方法：params、query、state和search，包括它们的使用方法、优缺点。例如，params适用于刷新地址栏参数仍保留的场景，但仅限于字符串；query则允许传递对象，但刷新后参数会丢失。理解这些方法对于优化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