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?';
    });
  }

React Redux确认导航

1 个答案: