Verhindern, dass Komponente unmounten wird - Benachrichtigung für Benutzer vor dem Öffnen anderer Komponenten anzeigen

Question

In meiner Webanwendung gibt es ein Formular, in dem Benutzer Daten eingeben. Wenn sie zu einer anderen Komponente oder zurück navigieren möchten, möchte ich sie darüber informieren, dass Änderungen am Formular vorgenommen wurden, und ihnen den Bestätigungsdialog zeigen. Ich weiß, wie dies implementiert wird, wenn Benutzer auf die Schaltfläche Zurück oben im Formular klicken, aber keine Ahnung haben, wie sie zu handhaben ist, wenn Benutzer auf die Menüoptionen der Seitenleiste klicken. (Es gibt eine Sidebar mit mehreren Links zu anderen Komponenten - mit react-Router).

Ich habe versucht, etwas mit ComponentWillunmount(), aber kein Glück, da die Komponente in jedem Fall abgehängt wird.

Wenn jemand Erfahrung darin hat, würde ich wirklich Hilfe brauchen.

Answer 1

Versuchen Sie, die routerWillLeave Haken, hier ist ein Beispiel von reagieren-Router-Dokumentation:

const Home = withRouter(
    React.createClass({ 

    componentDidMount() { 
     this.props.router.setRouteLeaveHook(this.props.route, this.routerWillLeave) 
    }, 

    routerWillLeave(nextLocation) { 
     // return false to prevent a transition w/o prompting the user, 
     // or return a string to allow the user to decide: 
     if (!this.state.isSaved) 
     return 'Your work is not saved! Are you sure you want to leave?' 
    }, 

    // ... 

    }) 
) 

https://github.com/ReactTraining/react-router/blob/master/docs/guides/ConfirmingNavigation.md