React-Router - 链接到同一页面不会触发页面卸载

Question

我正在使用react-router Link来浏览我的SPA应用程序。

在某些情况下，我会遇到这样的情况：页面上有一个链接指向完全相同的页面和参数，例如：

我在../page1/2中，并且我有一个链接指向相同的路由：

<Link to='/page1/2'>
     click me
</Link>

我的问题是在这种情况下，只有 componentDidUpdate 能够触发，而 componentWillUnmount 和 componentDidMount 都没有被触发。

这是有问题的，因为我需要在 componentWillUnmount 中进行一些清理工作。

有什么解决方法吗？

- omriman12

---

这里有两个很好的答案，但从语义上讲，我认为你应该采纳 @damianfabian 的回答。如果必须在链接确定的条件下重新渲染组件，那么添加 onClick 会更好，但在你的情况下，似乎你想始终重新渲染它。再次强调，它们两个都是正确的，但 componentWillReceiveProps 从语义上来说更合适。 - Facundo La Rocca

Answer 1

您需要检查 componentWillReceiveProps 来处理这些更改，react-router 识别组件是活动的，并且不会卸载组件，只会传递新的属性。

componentWillReceiveProps (nextProps) {
   if(nextProps.id === this.props.id) {
     // Clean component and reload? 
   }
}

- damianfabian

---

这个会起作用，但是对这个解决方案仍有一些问号，不过谢谢。 - omriman12

Answer 2

react-router 的工作方式类似于任何其他组件 - 它会触发状态的更改。 如果状态已更改，react 的协调过程将找出哪些组件（在您的情况下是路由）需要重新渲染。

在您的情况下，页面将完全相同，这会使 React 认为没有发生更改。 因此，该组件将永远不会重新渲染和取消挂载。

最简单的解决方案是在 <Link /> 上添加一个 onClick 处理程序来执行清理操作。 像这样的东西：

handleCleanup(e) {
  if (window.location.href === e.target.href) {
    // do your cleanup like you do in componentWillUnmount
  }
}
render() { 
  return <Link onClick={this.handleCleanup.bind(this)} to={`/page/1/${this.state.someProp}` />
}

- Kris Selbekk

Answer 3

当您仅更改参数且相同的处理程序被呈现时，处理程序不会重新安装；它只会被更新，就像在React中更改其props（除了key）不会重新安装其子组件一样。因此，您将无法获得componentDidMount，但可以使用componentWillReceiveProps。

componentWillReceiveProps (nextProps) {
   // do whatever clean up you need before rerendering
   // goo practise checking somehow that you are in the desired situation
}

无论如何，我建议你看一下React组件生命周期，如果你正在学习这个框架，它非常重要。

- rakwaht