react router路由傳參三種方式

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傳值'

優點:優雅,可傳對象

缺點:刷新頁面,參數丟失

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章