So verhindern Sie, dass der Browser mit dem React-Router-Dom zurückkehrt und den Status beibehält
Ich entwickle mit React-Router-Dom. Jetzt erstelle ich eine Seite, auf der Benutzer Informationen in ein Formular eingeben können. Ich möchte verhindern, dass der Benutzer die eingegebenen Informationen verliert, wenn er versehentlich zur vorherigen Seite zurückkehrt.
Ich habe zuerst im folgenden Artikel einen Weg gefunden, den Browser zu stoppen. Es scheint, dass Sie in dem Moment, in dem Sie zur vorherigen Seite zurückkehren, sofort zur ursprünglichen Seite zurückkehren, wodurch Sie effektiv daran gehindert werden, zur vorherigen Seite zurückzukehren.
React.useEffect (() => {
return () => {
props.history.goForward ();
}
}, []);
Reagieren Sie auf die Schaltfläche "Browser zurück" des Routers Dom v4
In diesem Fall wird die vorherige Seite jedoch einmal zurückgegeben, sodass alle aktuellen Seiteninformationen (Status) zurückgesetzt werden. Gibt es eine Lösung, um zu verhindern, dass der Status zurückgesetzt wird? Oder gibt es einen intelligenteren Weg, dies zu lösen?
Unten habe ich ein Bild zur Erklärung vorbereitet.

Antworten
Sie haben mehrere Möglichkeiten, sich Ihrer Antwort zu nähern, aber alle haben ein Konzept, und das ist eine Komponente höherer Ordnung. In diesem Fall müssen Sie also eine Komponente der obersten Ebene (höher als der Reaktionsrouter) haben Der Standort hat sich geändert, Sie verlieren die Informationen im Status nicht. Mit anderen Worten, Sie müssen einen allgemeinen Zustand haben.
Wie können Sie dieses Ziel erreichen? Sie haben verschiedene Möglichkeiten und ich bin hier, um Ihnen bei der Verwendung zu helfen.
- Redux - https://redux.js.org/.
- Kontext - https://reactjs.org/docs/context.html.
- Reaktionszustand - https://reactjs.org/docs/higher-order-components.html.
- localStorage oder sessionStorage - https://www.robinwieruch.de/local-storage-react.
- ...
Dies sind nur einige Beispiele dafür, wie Sie verhindern können, dass der Status verloren geht, wenn sich der Speicherort des Browsers geändert hat.