javascript - 在同一路径上访问时， react 路由器链接不会导致重新渲染

Question

我正在使用 react router v4，在重新加载页面时遇到了一些问题(不是 window.location.reload)。我最好给出一个真实的用例来解释这个问题，我们以社交网络应用为例:

1. 用户A评论了用户B的帖子，通知出现在用户B的页面。
2. 用户 B 单击通知，我们执行 this.props.history.push('/job/' + id')，它起作用了，因此用户 B 去了 job/123 页。
3. 用户A再次评论，新通知出现在用户B页面，而用户B还停留在job/123页面，他点击了通知链接，触发了this.props。 history.push('/job' + id').但是他不会看到页面重新呈现，他没有看到最新的评论，因为该页面什么都不做。

Answer 1

在很多情况下，这似乎是一个常见的场景。它可以使用许多不同的方法来解决。检查这个stackoverflow question .有一些很好的答案和发现。个人this approach对我来说更有意义。

location.key 每次用户尝试在页面之间导航时都会更改，即使在同一 route 中也是如此。要在 /jod/:id 组件中的代码块下方测试此位置:

componentDidUpdate (prevProps) {
    if (prevProps.location.key !== this.props.location.key) {
      console.log("... prevProps.key", prevProps.location.key)
      console.log("... this.props.key", this.props.location.key)
    }
  }

我遇到过完全相同的情况。 componentDidUpdate 中的更新状态。之后按预期工作。单击同一路线内的项目会更新状态并显示正确的信息。

我假设(因为不确定你是如何在 /job/:id 中传递/更新注释的)如果你在你的 /job/:id 中设置这样的东西> 组件应该工作:

componentDidUpdate (prevProps) {
    if (prevProps.location.key !== this.props.location.key) {

      this.setState({
        comments: (((this.props || {}).location || {}).comments || {})
      })
    }
  }