react router路由傳參三種方式:通過通配符傳參、query傳參和state傳參。
1.通配符傳參
Route定義方式:
<Route path='/path/:name' component={Path}/>
Link組件:
<Link to="/path/通過通配符傳參">通配符</Link>
參數獲取:
this.props.match.params.name
優點:簡單快捷,並且,在刷新頁面的時候,參數不會丟失。
缺點:只能傳字符串,並且,如果傳的值太多的話,url會變得長而醜陋。
如果,你想傳對象的話,可以用JSON.stringify(),想將其轉爲字符串,然後另外的頁面接收後,用JSON.parse()轉回去。
2.query
Route定義方式:
<Route path='/query' component={Query}/>
Link組件:
var query = {
pathname: '/query',
query: '我是通過query傳值 '
}
<Link to={query}>query</Link>
參數獲取:
this.props.location.query
優點:優雅,可傳對象
缺點:刷新頁面,參數丟失
3.state
Route定義方式:
<Link to={state}>state</Link>
Link組件:
var state = {
pathname: '/state',
state: '我是通過state傳值'
}
<Route path='/state' component={State}/>
參數獲取:
this.props.location.state
這裏的this.props.location.state === '我是通過query傳值'
優點:優雅,可傳對象
缺點:刷新頁面,參數丟失