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