Comment empêcher le navigateur de revenir avec react-router-dom et conserver l'état

Question

Je développe avec react-router-dom. Maintenant, je crée une page où les utilisateurs peuvent entrer des informations dans un formulaire. Ce que je veux faire, c'est empêcher l'utilisateur de perdre les informations qu'il saisit s'il revient accidentellement à la page précédente.

J'ai d'abord trouvé un moyen d'arrêter le navigateur dans l'article ci-dessous. Il semble qu'au moment où vous revenez à la page précédente, vous revenez immédiatement à la page d'origine, ce qui vous empêche effectivement de revenir à la page précédente.

React.useEffect (() => {
    return () => {
            props.history.goForward ();
        }
    }, []);

Bouton de retour du navigateur React Router Dom v4 handle

Cependant, dans ce cas, la page précédente sera renvoyée une fois, donc toutes les informations de la page en cours (état) seront réinitialisées. Existe-t-il une solution pour empêcher la réinitialisation de l'état? Ou existe-t-il un moyen plus intelligent de résoudre ce problème?

Ci-dessous, j'ai préparé une image pour l'explication.

Answer 1

Vous avez plusieurs façons d'aborder votre réponse, mais elles ont toutes un concept, et c'est un composant d'ordre supérieur, donc dans ce cas, vous devez avoir un composant de niveau supérieur (supérieur à react-router), donc quand l'emplacement a changé, vous ne perdez pas les informations dans l'état. en un autre mot, il faut avoir un état général.

Alors, comment pouvez-vous atteindre cet objectif? vous avez plusieurs moyens et je suis là pour vous aider à les utiliser.

1. redux - https://redux.js.org/.
2. le contexte - https://reactjs.org/docs/context.html.
3. état de réaction - https://reactjs.org/docs/higher-order-components.html.
4. localStorage ou sessionStorage - https://www.robinwieruch.de/local-storage-react.
5. ...

ce ne sont que quelques exemples de ce que vous pouvez faire pour éviter de perdre l'état lorsque l'emplacement du navigateur a changé.