Cómo evitar que el navegador vuelva con react-router-dom y mantener el estado

Question

Estoy desarrollando con react-router-dom. Ahora, estoy creando una página donde los usuarios pueden ingresar información en un formulario. Lo que quiero hacer es evitar que el usuario pierda la información que ingresa si accidentalmente regresa a la página anterior.

Primero encontré una manera de detener el navegador en el artículo siguiente. Parece que en el momento en que regresa a la página anterior, regresa inmediatamente a la página original, lo que efectivamente le impide regresar a la página anterior.

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

React Router Dom v4 manejar el botón de retroceso del navegador

Sin embargo, en este caso, la página anterior se devolverá una vez, por lo que se restablecerá toda la información de la página actual (estado). ¿Existe una solución para evitar que el estado se restablezca? ¿O hay una forma más inteligente de resolver esto?

A continuación, he preparado una imagen para la explicación.

Answer 1

Tiene varias formas de abordar su respuesta, pero todas tienen 1 concepto, y ese es Componente de orden superior, por lo que en este caso, debe tener un componente de nivel superior (Más alto que react-router), así que cuando la ubicación ha cambiado, no pierde la información en el estado. en otras palabras, tienes que tener un estado general.

Entonces, ¿cómo puede alcanzar este objetivo? tiene varias formas y estoy aquí para ayudarlo a usarlas.

1. redux - https://redux.js.org/.
2. contexto - https://reactjs.org/docs/context.html.
3. estado de reacción - https://reactjs.org/docs/higher-order-components.html.
4. localStorage o sessionStorage - https://www.robinwieruch.de/local-storage-react.
5. ...

Estos son solo algunos ejemplos de lo que puede hacer para evitar perder el estado cuando la ubicación del navegador ha cambiado.