react 路由传参

今天，我们要讨论的是react router中Link传值的三种表现形式。分别为通过通配符传参、query传参和state传参。

ps:进入正题前，先说明一下，以下的所有内容都是在react-router V4的版本下。

1.params

Route定义方式：

<Route path='/path/:name' component={Path}/>

Link组件：

HTML方式

<Link to="/path/通过通配符传参">通配符</Link>

JS方式

this.props.history.push({
  pathname:'/shopCarDetail',
  params:{
    name:'jack'
  }
});

参数获取：

this.props.location.params.name // jack

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 // Friday

优点：优雅，可传对象

缺点：刷新页面，参数丢失

3.state

Route定义方式：

<Route path='/state' component={State}/>

Link组件：

HTML方式

var state = {
  pathname: '/state',
  state: {name: 'sunny'}
}

<Link to={state}>state</Link>

JS方式

this.props.history.push({
  pathname:'/state',
  state:{
    name:'sunny'
  }
});

参数获取：

this.props.location.state.name // sunny

优点：优雅，可传对象

缺点：刷新页面，参数丢失