Neste artigo você aprenderá a como resolver o erro useHistory is not exported from react-router-dom, que acontece em aplicações de React JS
Fala programador(a), beleza? Bora aprender mais sobre React JS!
Se você já se aventurou no mundo do desenvolvimento com React, é provável que tenha utilizado a biblioteca react-router-dom para gerenciar as rotas de sua aplicação.
Por vezes, ao tentar usar o hook useHistory, você pode ter se deparado com um erro afirmando que “useHistory is not exported from react-router-dom”.
Neste artigo, abordaremos a causa desse erro e como resolvê-lo da forma mais otimizada e moderna.
Entendendo o Erro
Para compreender a solução, primeiro precisamos entender a origem do problema.
O que é o useHistory?
No React Router v5, o hook useHistory era amplamente utilizado para acessar o objeto history, permitindo que os desenvolvedores manipulassem o histórico do navegador.
import { useHistory } from 'react-router-dom';
function MeuComponente() {
const history = useHistory();
const redirecionarParaInicio = () => {
history.push("/");
};
return <button onClick={redirecionarParaInicio}>Ir para início</button>;
}
A Mudança no React Router v6
A versão 6 do React Router trouxe várias mudanças significativas, uma das quais foi a remoção do hook useHistory.
Em vez disso, os desenvolvedores são agora encorajados a usar o hook useNavigate.
Solucionando o Problema
Agora que sabemos que o hook useHistory não está mais disponível no React Router v6, podemos trabalhar na correção do erro.
Migrando para useNavigate
O useNavigate serve ao mesmo propósito que o useHistory servia anteriormente, mas com uma API ligeiramente diferente.
Vamos ver como podemos ajustar nosso código para utilizar o useNavigate.
import { useNavigate } from 'react-router-dom';
function MeuComponente() {
const navegar = useNavigate();
const redirecionarParaInicio = () => {
navegar("/");
};
return <button onClick={redirecionarParaInicio}>Ir para início</button>;
}
Como você pode ver, a principal diferença está na forma de invocar a navegação. Anteriormente, utilizávamos history.push, mas agora simplesmente chamamos a função navegar diretamente.
Considerando um Downgrade
Se por algum motivo, seja por dependência de outros pacotes ou preferência pessoal, você quiser continuar usando a versão 5 do React Router, você pode considerar fazer um downgrade.
No entanto, é importante observar que isso não é a solução mais otimizada ou moderna, pois estará perdendo as melhorias e correções de bugs da versão mais recente.
npm install react-router-dom@5
Ao fazer isso, você poderá continuar usando o useHistory como antes.
Outras Considerações ao Atualizar
Ao migrar para o React Router v6, não apenas o useHistory foi afetado. Outros aspectos, como a estrutura do Route, também mudaram.
Certifique-se de revisar a documentação e as notas de atualização para garantir uma transição suave.
Quer aprender mais sobre programação? Conheça nosso canal no YouTube:
Conclusão
Chegamos ao fim do artigo sobre o erro useHistory is not exported from react-router-dom!
A evolução das bibliotecas é algo natural no mundo do desenvolvimento, e com o React Router não foi diferente.
A mudança do useHistory para o useNavigate no React Router v6 pode inicialmente causar alguns contratempos, mas a transição é direta e traz consigo melhorias na API.
Ao manter-se atualizado e adaptando-se às novas práticas, você garante que sua aplicação esteja sempre utilizando o que há de mais recente e otimizado no ecossistema React.
Está buscando em evoluir como Programador? Confira o nossos cursos de programação.