72.React 路由传参跳转

[wqjiao]

1、params

• 参数采用动态路由

<Route path="detail:id" component={Detail} />

• js跳转

this.props.history.push('detail/1');

• 接收参数

this.props.match.params.id;

2、query

• js 跳转

this.props.history.push('detail?id=1');

或者

this.props.history.push({
  pathname: 'detail',
  query: {
    id: 1
  }
});

• 接收参数

this.props.match.query.id;

3、state

• js 跳转

this.props.history.push({
  pathname: 'detail',
  state: {
    id: 1
  }
});

• 接收参数

this.props.location.state;