Ich möchte, dass meine ReactJS-App einen Benutzer benachrichtigt, wenn er von einer bestimmten Seite weg navigiert. Insbesondere eine Popup-Nachricht, die ihn / sie daran erinnert, eine Aktion auszuführen:
"Änderungen werden gespeichert, aber noch nicht veröffentlicht. Tun Sie das jetzt?"
Sollte ich dies react-router
global auslösen , oder kann dies innerhalb der Reaktionsseite / -komponente erfolgen?
Ich habe bei letzterem nichts gefunden, und ich möchte lieber das erste vermeiden. Es sei denn, es ist natürlich die Norm, aber das lässt mich fragen, wie man so etwas macht, ohne jeder anderen möglichen Seite, zu der der Benutzer gehen kann, Code hinzufügen zu müssen.
Irgendwelche Einblicke willkommen, danke!
reactjs
react-router
Barry Staes
quelle
quelle
componentWillUnmount() { if (confirm('Changes are saved, but not published yet. Do that now?')) { // publish and go away from a specific page } else { // do nothing and go away from a specific page } }
so können Sie Ihre Funktion aufrufen veröffentlichen Bevor die Seite verlassenAntworten:
react-router
v4 führt eine neue Methode zum Blockieren der Navigation mit einPrompt
. Fügen Sie dies einfach zu der Komponente hinzu, die Sie blockieren möchten:Dadurch wird jegliches Routing blockiert, jedoch keine Seitenaktualisierung oder -schließung. Um dies zu blockieren, müssen Sie Folgendes hinzufügen (Aktualisierung nach Bedarf mit dem entsprechenden React-Lebenszyklus):
onbeforeunload wird von Browsern unterschiedlich unterstützt.
quelle
onberforeunload
Warnung zu formatieren.react-router
dies nicht sofort (vorausgesetzt, die Schaltfläche Abbrechen löst keine Routenänderungen aus). Sie können jedoch Ihr eigenes Modal erstellen, um das Verhalten nachzuahmen.onbeforeunload
, möchten Sie es bereinigen, wenn Ihre Komponente die Bereitstellung aufhebt.componentWillUnmount() { window.onbeforeunload = null; }
Im React-Router
v2.4.0
oder höher und davorv4
gibt es mehrere MöglichkeitenonLeave
fürRoute
setRouteLeaveHook
fürcomponentDidMount
Sie können verhindern, dass ein Übergang stattfindet, oder den Benutzer auffordern, bevor Sie eine Route mit einem Leave-Hook verlassen.
Beachten Sie, dass in diesem Beispiel die
withRouter
in eingeführte Komponente höherer Ordnung verwendet wirdv2.4.0.
Diese Lösung funktioniert jedoch nicht ganz perfekt, wenn die Route in der URL manuell geändert wird
In dem Sinne, dass
So
react-router v4
verwenden Sie die Eingabeaufforderung oder den benutzerdefinierten Verlauf:In
react-router v4
ist es jedoch mit Hilfe desPrompt
from'react-Routers einfacher zu implementierenLaut Dokumentation
In Ihrer Rendermethode müssen Sie dies einfach wie in der Dokumentation angegeben entsprechend Ihren Anforderungen hinzufügen.
AKTUALISIEREN:
Wenn Sie eine benutzerdefinierte Aktion ausführen möchten, wenn die Verwendung die Seite verlässt, können Sie den benutzerdefinierten Verlauf verwenden und Ihren Router wie folgt konfigurieren
history.js
und dann können Sie in Ihrer Komponente
history.block
like verwendenquelle
<Prompt>
die URL verwenden, wird diese geändert, wenn Sie an der Eingabeaufforderung auf Abbrechen klicken. Verwandte Ausgabe: github.com/ReactTraining/react-router/issues/5405Für
react-router
2.4.0+HINWEIS : Es ist ratsam, Ihren gesamten Code auf den neuesten Stand zu migrieren
react-router
, um alle neuen Extras zu erhalten.Wie in der React-Router-Dokumentation empfohlen :
Man sollte die
withRouter
Komponente höherer Ordnung verwenden:Als ES6-Beispiel aus der Dokumentation:
quelle
Für
react-router
v3.x.Ich hatte das gleiche Problem, bei dem ich eine Bestätigungsnachricht für nicht gespeicherte Änderungen auf der Seite benötigte. In meinem Fall habe ich React Router v3 verwendet , daher konnte ich nicht verwenden
<Prompt />
, was von React Router v4 eingeführt wurde .Ich behandeln ‚Zurück - Button klicken‘ und ‚zufälligen Link klicken‘ mit der Kombination aus
setRouteLeaveHook
undhistory.pushState()
und behandeln ‚Reload - Button‘ mitonbeforeunload
Event - Handler.setRouteLeaveHook ( doc ) & history.pushState ( doc )
Es reichte nicht aus, nur setRouteLeaveHook zu verwenden. Aus irgendeinem Grund wurde die URL geändert, obwohl die Seite beim Klicken auf die Schaltfläche "Zurück" dieselbe blieb.
onbeforeunload ( doc )
Es wird verwendet, um die Schaltfläche "Versehentliches Nachladen" zu behandeln
Unten ist die vollständige Komponente, die ich geschrieben habe
this.props.router
.this.props.route
von der aufrufenden Komponente weitergegeben wirdBeachten Sie, dass dies
currentState
als Requisite übergeben wird, um den Anfangszustand zu haben und Änderungen zu überprüfenBitte lassen Sie mich wissen, wenn es irgendwelche Fragen gibt :)
quelle
Für
react-router
v0.13.x mitreact
v0.13.x:Dies ist mit den
willTransitionTo()
undwillTransitionFrom()
statischen Methoden möglich. Für neuere Versionen siehe meine andere Antwort unten.Aus der React-Router-Dokumentation :
Für
react-router
1.0.0-rc1 mitreact
v0.14.x oder höher:Dies sollte mit dem
routerWillLeave
Lifecycle-Hook möglich sein. Für ältere Versionen siehe meine Antwort oben.Aus der React-Router-Dokumentation :
Dinge. kann sich jedoch vor der endgültigen Veröffentlichung ändern.
quelle
Sie können diese Eingabeaufforderung verwenden.
quelle
Verwenden von history.listen
Zum Beispiel wie unten:
In Ihrer Komponente,
quelle