react路由传参数

Posted 2022-11-29 Jmytea

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