React Redux 确认导航

Question

我正在尝试实现一个产品页面，它使管理员能够通过单击编辑按钮来修改产品详细信息，但如果管理员试图离开页面并保留他们尚未保存的更改，它会确认用户想要离开页面而不保存。

这是我目前在我的 ProductForm.js 中拥有的，当管理员单击编辑时 Product.js 使用它。

import { browserHistory } from 'react-router';
  componentWillReceiveProps() {
    browserHistory.listenBefore(location => {
      console.log(location);
      return 'Are you sure you want to leave the page without saving?';
    });
  }

以下代码的问题在于，当用户打开编辑表单时，即使您不在产品页面上，也会在每次页面转换时显示此确认消息。

我正在使用以下骨架。 https://github.com/erikras/react-redux-universal-hot-example

Answer 1

你可以像这样取消监听器：

import { browserHistory } from 'react-router';
  componentWillReceiveProps() {
    const cancelListner = browserHistory.listenBefore(location => {
      console.log(location);
      cancelListner();
      return 'Are you sure you want to leave the page without saving?';
    });
  }