react 路由傳參
阿新 • • 發佈:2018-07-04
javascrip 參數 優點 out 進入 ram pat code string
今天,我們要討論的是react router中Link傳值的三種表現形式。分別為通過通配符傳參、query傳參和state傳參。
ps:進入正題前,先說明一下,以下的所有內容都是在react-router V4的版本下。
1.通配符傳參
Route定義方式:
<Route path=‘/path/:name‘ component={Path}/>
Link組件:
HTML方式
<Link to="/path/通過通配符傳參">通配符</Link>
JS方式
this.props.router.push(‘/path/‘+‘參數‘)
參數獲取:
this.props.match.params.name
註意這個match,許多博客活文章都是忽略了它,導致取不到值。這裏的this.props.match.params.name === ‘通過通配符傳參’。
優點:簡單快捷,並且,在刷新頁面的時候,參數不會丟失。
缺點:只能傳字符串,並且,如果傳的值太多的話,url會變得長而醜陋。
如果,你想傳對象的話,可以用JSON.stringify(),想將其轉為字符串,然後另外的頁面接收後,用JSON.parse()轉回去。這裏簡單提一下,不贅述。
2.query
Route定義方式:
<Route path=‘/query‘ component={Query}/>
Link組件:
HTML方式
var query = { pathname: ‘/query‘, query: {day: ‘Friday‘} } <Link to={query}>query</Link>
JS方式
this.props.history.push({ pathname : ‘/query‘ ,query : { day: ‘Friday‘} })
參數獲取:
this.props.location.query.day
這裏的this.props.location.query === ‘我是通過query傳值‘
優點:優雅,可傳對象
缺點:刷新頁面,參數丟失
3.state
Route定義方式:
<Link to={state}>state</Link>
Link組件:
HTML方式
var state = { pathname: ‘/state‘, state: ‘我是通過state傳值‘ } <Route path=‘/state‘ component={State}/>
JS方式
this.props.router.push({ pathname:‘/sort‘,state:{name : ‘sunny‘ } })
參數獲取:
this.props.location.state
這裏的this.props.location.state === ‘我是通過query傳值‘
優點:優雅,可傳對象
缺點:刷新頁面,參數丟失
react 路由傳參