Abbrechen/Erlaube react-Router Übergang nach Bestätigung im Dialogfeld über ComponentWillUnmount

Question

Ich bin ein Redux-Anwendung erstellen. Ich möchte Benutzer bestätigen, wenn sie die Komponente verlassen wollen, ohne die Daten zu speichern oder den Übergang abzubrechen und speichern und dann vielleicht verlassen.

Gibt es zum Beispiel eine Möglichkeit, das Aushängen einer Komponente zu stoppen?

Answer 1

Eine bessere Möglichkeit ist die folgenden routerWillLeave Haken zu erstellen, wenn Sie bereits react-router verwenden.

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

routerWillLeave(e) { 
    // check for a condition here 
    if (this.state.allowLeave === false) { 
    const message = 'Are you sure?'; 
    (e || window.event).returnValue = message; 
    return message; 
    } 
} 

auch um sicherzustellen, dass this.props.router verfügbar ist, müssen Sie die Komponente als exportieren:

export default withRouter(MyComponent); 

docs auf https://github.com/reactjs/react-router/blob/master/docs/guides/ConfirmingNavigation.md See.

Answer 2

Es gibt keine Möglichkeit, das Aushängen der Komponente zu verhindern. Sie können window.onbeforeunload verwenden, um zu verhindern, dass Benutzer die aktuelle Registerkarte schließt und Daten im Hintergrund unterspeichert. So mache ich es in meiner App.

Wenn window.onbeforeunload irgendetwas zurückgibt, außer undefined, wird ein Bestätigungsdialogfeld ausgelöst.

window.onbeforeunload =() => 'Are you sure?';