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