29 de Janeiro de 2020 • 1 min de leitura
Erro ao atualizar a página com ReactJS e React Router
Com o servidor local funciona, mas em produção ao tentar fazer o reload da página (que não seja a principal) dá erro 404.
Já foi pego de surpresa ao tentar acessar a aplicação em produção (uma rota específica) e, ao tentar atualizar com F5, aparecer a mensagem de erro 404? É bem simples de resolver, mas assusta num primeiro momento.
Assusta? Como assim, Márcio? Se rodando localmente está tudo funcionando lindamente e, ao atualizar a página (com ReactJS e React Router) em modo produção, falha...
Como corrigir o erro ao atualizar a página com ReactJS e React Router?
Como em produção trabalha-se apenas com o arquivo .html (SPA - Single Page Application), precisamos configurar um fallback.
Se tentar acessar a aplicação, vamos supor: myapp.com.br/reports, a rota /reports, por padrão, seria interpretada como um arquivo reports.html. Ao configurarmos o fallback, resolvemos esse problema.
Acesse a pasta/diretório public da sua aplicação e crie o arquivo __redirects. Adicione o seguinte conteúdo:
/* /index.html 200Agora, depois que fizer o deploy, ao fazer o reload em qualquer rota vai funcionar normalmente.
Referência: https://create-react-app.dev/docs/deployment/#netlify
Até breve!