React Redux Bestätigung Navigation

Question

Ich versuche, eine Produktseite zu erreichen, die dem Administrator die Möglichkeit gibt, die Produktdetails durch Klicken auf eine Bearbeitungsschaltfläche zu ändern, aber wenn der Administrator versucht, die Seite mit Änderungen zu verlassen, die sie noch nicht haben gespeichert, würde es bestätigen, dass der Benutzer die Seite verlassen möchte, ohne zu speichern.

Hier ist, was ich derzeit in meiner ProductForm.js, die von Product.js verwendet wird, wenn Admin auf Bearbeiten klicken.

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

Das Problem mit dem folgenden Code ist, dass, wenn der Benutzer das Formular bearbeiten öffnet, diese Bestätigungsmeldung auf jeder Seite Übergang zeigt, auch wenn Sie nicht auf der Produktseite sind.

Ich benutze das folgende Skelett. https://github.com/erikras/react-redux-universal-hot-example

Answer 1

Sie können Hörer wie folgt aufheben:

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