小编典典

如何防止在React Components中卸载?

reactjs

我正在尝试在我的应用程序中实现一项功能,当用户尝试从未提交的表单中导航时,会向他们提供确认,询问他们是否确定要在保存更改之前离开。

componentWillUnmount
方法似乎是这样,因为它会火的所有不同的方式,用户可能会放弃的形式完美的候选人(改变,导致它消失父组件状态,导航到不同的路线,等等…)。但是…当确认返回false时,我无法阻止卸载。

关于如何执行此操作的任何建议?


阅读 307

收藏
2020-07-22

共1个答案

小编典典

最好通过react-router:setRouteLeaveHook处理。

componentWillMount() {
    this.unregisterLeaveHook = props.router.setRouteLeaveHook(props.route, this.routerWillLeave.bind(this));
}

routerWillLeave(nextLocation) {
  return false;        
}

并且在卸载组件时,取消注册离开钩子:

componentWillUnmount() {
    this.unregisterLeaveHook();
}
2020-07-22