reactjs - 在 ComponentWillUnmount 上通过对话框确认后取消/允许 react 路由器转换

Question

我正在构建一个 Redux 应用程序。我希望用户确认他们是否想要离开组件而不保存数据或取消转换并保存它然后可能离开。

例如，有什么方法可以阻止组件卸载吗？

Answer 1

如果您已经在使用 react-router，更好的方法是创建以下 routerWillLeave Hook 。

componentDidMount() {
  this.props.router.setRouteLeaveHook(this.props.route, this.beforeUnload);
}

routerWillLeave(e) {
  // check for a condition here
  if (this.state.allowLeave === false) {
    const message = 'Are you sure?';
    (e || window.event).returnValue = message;
    return message;
  }
}

此外，为了确保 this.props.router 可用，您必须将组件导出为:

export default withRouter(MyComponent);

请参阅 https://github.com/reactjs/react-router/blob/master/docs/guides/ConfirmingNavigation.md 上的文档.