reactjs - 通过 react-router-4 导航后未获取路由参数

Question

通过导航后，this.props.history.push我没有route params进入component.

我有component在两条路线上呈现的单曲。

因此，从一条路线到另一条路线的结果是component update，我没有route params参与其中。

如果刷新页面我得到route params

this.props.history.push(`/pois/select/${lastAction.payload.poiID}`)

我的路由组件。

  class Routes extends React.Component {
  render() {
    return <div>
            <Switch >
                <Route exact path="/pois/" component={ POIS } mode='view' />
                <Route exact path="/pois/select/:poiID" component={ POIS } mode='select' />
                <Route exact path="/pois/create" component={ POIS } mode='create'/>
                <Route exact path="/pois/update/:poiID" component={ POIS } mode='update'/>
            </Switch>
       </div>;
  }

Answer 1

使用组合componentWillReceiveProps和componentDidMount生命周期方法。

当第一次渲染组件时，在componentDidMount方法内部进行 api 调用，并获取数据，如下所示：

componentDidMount(){
   // ajax call to fetch data then do setState to store in state variable
}

下次当 props 发生任何变化时，componentWillReceiveProps方法将被调用，在其中进行 api 调用，如下所示：

componentWillReceiveProps(nextProps){
     console.log(nextProps.params, this.props.params);
  // nextProps.params will print the new params values
  // this.props.params will print the old params values
  // ajax call to fetch data then do setState to store in state variable
}