在ComponentWillUnmount上的via对话框中确认后取消/允许react-router转换

Question

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

例如,有没有办法阻止组件卸载？

Answer 1

routerWillLeave如果您已经使用,更好的方法是创建以下钩子react-router.

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上的文档.