通过 react-router-4 导航后没有获取路由参数

Question

通过 this.props.history.push 导航后，我没有在 component 中找到 route params。

我有一个 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
}

通过 react-router-4 导航后没有获取路由参数

Not getting route params after navigating via react-router-4

reactjs

redux

react-router-v4