Question

我有一个要求，我需要在用户导航到下一个标签之前检查本地状态是否有变化。有点像放弃组件放弃。我提出了以下两个选项，

通过componentWillUnmount实现此目标。如果一个好的做法是有条件地停止拆卸组件吗？
通过window。如以下解决方案中所述：https://groups.google.com/forum/#!topic/reactjs/z63RGG1l_0U

非常感谢有关此事的任何想法：）

Answer 1

react-router-redux路由器是州的一部分，因此您可以对此进行试验。

为此，您应该查看RouterContext，它提供了setRouteLeaveHook函数。要么据我所知，这也是第二种选择。上下文中的路由器对象包含 listenBeforeLeavingRoute

this.context.router.listenBeforeLeavingRoute

但是如果你看一下react-router的源代码，它基本上是一回事。但它可以从不同的层访问。

编辑：Route也有onLeave挂钩，可能有用！

希望它有所帮助。

此致马里乌斯

Answer 2

用户如何导航到下一个标签？当您使用<Link>时，您可以在州内定义unsavedChanges标志。每当您认为用户不得离开当前选项卡时，将此设置为true（通过调度操作并让reducer负责该操作）。

class Foo extends React.Component {
  handleClick(e) {
    const { unsavedChanges } = this.props
    if(unsavedChanges) {
      e.preventDefault()
    }
  }
  render() {
    return (
      <Link to='/nextTab' onClick={this.handleClick}>Bar</Link>
    )
  }
}

当然，您需要将unsavedChanges传递给组件道具。

如果当前组件发生更改，则停止加载新路由/组件

2 个答案: