今天，我們要討論的是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 路由傳參