React-Router - 导航到URL时未调用componentDidMount

Question

我对这个有点难过。我定义了一个名为classes/:id的路线。在应用程序中导航到该路线时，会调用componentDidMount()。但是，在重新加载页面或复制并粘贴URL时，页面会完全加载，但根本不会调用componentDidMount()方法。

根据我的阅读，原因是因为即使重新加载页面也会安装相同的组件，这就是为什么生命周期方法会被解雇的原因。

有哪些方法可以解决这个问题？非常感谢您的帮助。谢谢！

Answer 1

如果您已经在componentDidMount路线，则不会再次呼叫{p> classes/:id。你可能想要做一些事情：

componentDidUpdate(prevProps) {
  if (this.props.id !== prevProps.id) {
    // fetch or other component tasks necessary for rendering
  }
}

Answer 2

我尽量避免任何mixins（参见willTransitionTo），因为它们被认为是有害的。

虽然在更改同一组件的路由时不会触发componentDidMount，但componentWillUpdate和componentWillReceiveProps会这样做。

从那里，您可以检测参数更改，并可以相应地触发您的操作。

Answer 3

componentWillReceiveProps，componentDidUpdate生命周期将接收新的props，然后setState改变状态以触发render方法。

Answer 4

我只是处理了这个确切的问题，花了我一段时间才找出问题所在。我确信以前建议的所有内容都可以很好地解决。我如何解决问题却有些不同。我的componentDidMount函数本质上只是提供状态更新，因此我只是将功能直接移到状态中并绕过了componentDidMount。

老实说，我不确定这是否是最佳实践（如果不是的话，我很高兴能得到反馈），但是它运行效率很高，到目前为止效果很好。