React Redux确认导航

Question

我试图实现产品页面，该页面使管理员能够通过单击编辑按钮来修改产品详细信息，但是如果管理员尝试使用尚未完成的更改离开页面保存，它会确认用户想要不保存就离开页面。

以下是我当前在ProductForm.js中使用的内容，当Admin单击编辑时，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?'; 
    }); 
    }