Javascript 在react路由器中在同一级别上切换路由时获取数据的正确方法？

在同一级别上切换路由时，获取数据的正确方法是什么？ 因为，根据，在同一级别上切换路由将 仅调用

component将接收props

和

componentdiddupdate

。 而

componentDidMount

仅在第一次输入路由时调用

使用如下的路由配置：

render((
  <Provider store={store}>
    <Router>
      <Route path="/" component={App}>
        <Route path="/:userId" component={Profile}/>
      </Route>
    </Router>
  </Provider>
), document.getElementById('root'));

这不起作用，因为在获取

userData

之前，这些道具是 完全平等

那么，在同一路由级别上切换路由时如何获取数据？

来自：

---

当路由更改时，

这个.props.params.userId

将更新，它在componentDidUpdate中被捕获，并触发一个获取。当然，此提取可能会更新状态或触发另一次重新渲染的道具，以显示提取的数据。

可能重复的图像。。。差不多三年后，这个问题被标记为重复。

class Profile extends React.Component {
  componentDidMount() {
    // initial data
    this.fetchUserData();
  }
  componentWillReceiveProps(nextProps) {
    if (this.props.params.userId !== nextProps.params.userId) {
      this.fetchUserData();
    }
  }
  shouldComponentUpdate(nextProps) {
    return this.props.params.userId !== nextProps.params.userId;
  }
  render() {
    return (
      <div className="profile"></div>
    );
  }
}

// deepEqual is function to check object equality recursively
componentWillReceiveProps(nextProps) {
  if (!deepEqual(this.props.userData, nextProps.userData)) {
    this.fetchUserData();
  }
}
shouldComponentUpdate(nextProps) {
  return !deepEqual(this.props.userData, nextProps.userData);
}

componentDidMount () {
  // fetch data initially in scenario 2 from above
  this.fetchInvoice()
},

componentDidUpdate (prevProps) {
  // respond to parameter change in scenario 3
  let oldId = prevProps.params.invoiceId
  let newId = this.props.params.invoiceId
  if (newId !== oldId)
    this.fetchInvoice()
},