Como evitar que o navegador volte com react-router-dom e mantenha o estado
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
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.
- Restaurado - https://redux.js.org/.
- contexto - https://reactjs.org/docs/context.html.
- estado de reação - https://reactjs.org/docs/higher-order-components.html.
- localStorage ou sessionStorage - https://www.robinwieruch.de/local-storage-react.
- ...
estes são apenas alguns exemplos do que você pode fazer para evitar a perda de estado quando o local do navegador é alterado.