Como evitar que o navegador volte com react-router-dom e mantenha o estado

Dec 23 2020

Estou desenvolvendo com react-router-dom. Agora, estou criando uma página onde os usuários podem inserir informações em um formulário. O que eu quero fazer é evitar que o usuário perca as informações inseridas se voltar acidentalmente à página anterior.

Eu encontrei uma maneira de parar o navegador no artigo abaixo. Parece que no momento em que você retorna à página anterior, você retorna imediatamente à página original, impedindo-o efetivamente de retornar à página anterior.

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

React Router Dom v4 manipular botão Voltar do navegador

No entanto, neste caso, a página anterior será retornada uma vez, portanto, todas as informações da página atual (estado) serão redefinidas. Existe uma solução para evitar que o estado seja redefinido? Ou existe uma maneira mais inteligente de resolver isso?

Abaixo, preparei uma imagem para explicação.

Respostas

2 Mahdi Dec 23 2020 at 15:10

Você tem várias maneiras de abordar sua resposta, mas todas elas têm um conceito, e esse é o componente de ordem superior, então, neste caso, você deve ter um componente de nível superior (superior do que o roteador de reação), então quando o local mudou, você não perde a informação no estado. em outras palavras, você tem que ter um estado geral.

Então, como você pode atingir esse objetivo? você tem várias maneiras e estou aqui para ajudá-lo a usá-las.

  1. Restaurado - https://redux.js.org/.
  2. contexto - https://reactjs.org/docs/context.html.
  3. estado de reação - https://reactjs.org/docs/higher-order-components.html.
  4. localStorage ou sessionStorage - https://www.robinwieruch.de/local-storage-react.
  5. ...

estes são apenas alguns exemplos do que você pode fazer para evitar a perda de estado quando o local do navegador é alterado.