Utilizando a aplicação no celular, frequentemente clico no botão voltar (do hardware do celular) para fechar o teclado. Acidentalmente clico mais de uma vez e a janela é fechada voltando para a anterior, perdendo todos os dados digitados.
No browser tem os botões de navegação, o botão F5, etc.
Há alguma forma de interceptar estas mudanças de página para tomar algum tipo de ação? Ex.:
Obrigado,
hoje, com a Alura e o Google Gemini
Olá Reinaldo!
Felizmente, é possível interceptar essas mudanças de página e tomar alguma ação para evitar a perda de dados.
Uma forma de fazer isso é utilizando o React Router, que permite controlar a navegação na sua aplicação. Você pode utilizar o componente Prompt do React Router para exibir um diálogo de confirmação antes de permitir que a página seja fechada.
Aqui está um exemplo de como você pode utilizar o Prompt para exibir um diálogo de confirmação:
import { Prompt } from 'react-router-dom';
function MeuComponente() {
const bloquearNavegacao = (location) => {
// Verifique se há dados não salvos
if (temDadosNaoSalvos) {
// Exiba o diálogo de confirmação
return 'Tem certeza que deseja sair? Seus dados não salvos serão perdidos.';
}
};
return (
<div>
<Prompt when={true} message={bloquearNavegacao} />
{/* Restante do seu componente */}
</div>
);
}
No exemplo acima, o Prompt é utilizado dentro do componente MeuComponente. O when é definido como true para sempre exibir o diálogo de confirmação. O message é uma função que será chamada quando ocorrer uma mudança de página. Nessa função, você pode verificar se há dados não salvos e retornar uma mensagem de confirmação.
Dessa forma, sempre que o usuário tentar fechar a janela ou navegar para outra página, o diálogo de confirmação será exibido, evitando a perda de dados.
Caso queria entender um pouco mais como funciona, logo abaixo estarei deixando o link de um material que pode lhe ajudar.
Espero ter ajudado e bons estudos!
O import gera o erro abaixo. Aliás todas as dicas que recebi, envolvendo outros componentes (useHistory, usePrompt ) , eu tive o mesmo erro. Será que é algum problema devido a versão do react que estou utilizando? Ou seria a forma que instalei o react-router-dom?
Module '"react-router-dom"' has no exported member 'Prompt'
Obrigado,
Boa tarde, Reinaldo!
Normalmente, quando uma biblioteca é instalada sem certas dependências, ou quando as dependências dessa biblioteca que vem na instalação convencional estão em versões depreciadas. Então é necessário atualizá-las, pois as mesmas podem acabar causando conflitos e erros, o que imagino que seja o seu caso.
Para se certificar que a biblioteca vai ser instalada com êxito, use os seguintes comandos:
Caso não tenha instalado o react-dom, use o seguinte comando:
npm install react-dom
Após a instalação ou de se certificar que tem a dependência anterior, execute o seguinte comando:
npm install react-router-dom
É provável que após rodar o último comando seja lançado uma mensagem informando que existem algumas dependências instaladas que com versões que podem comprometer o projeto, por isso rode esse último comando para realizar a varredura e atualização das mesmas.
npm audit fix --force
Dessa forma, o erro do módulo exportado não estar sendo encontrado não ocorrerá mais!
Espero ter ajudado!
Boa noite,
Criei uma aplicação do zero e o problema persiste. Passo 1, criação da App) npx create-react-app react_teste --template typescript --use-npm Passo 2, instalação do react-DOM) npm install react-dom Passo 3, instalação do react-router-dom) npm install react-router-dom
No import abaixo, useNavigate importa e useHistory não. Alias, a maioria dos hooks que tentei usar do react-router-dom falharam.
import { useHistory, useNavigate } from 'react-router-dom';
Como a aplicação é nova, difícil dizer que é problema de versão ou conflito de dependências. Isto está me complicando.
Obrigado.
Parece que encontrei a resposta. Parece que nas novas versões do router-dom o useHistory foi substituído pelo useNavigate.