Deploy de um projeto React/Vite na vercel - Problema nas rotas e recarregar página retornando 404
Boa noite, pessoal. Todos bem?
Bom, como o título já dá o spoiler, estou sofrendo com deploy. Tenho um projeto realizado em React/vite, meio que acabei o primeiro passo do projeto e já queria ver ele rodando, por exemplo na vercel.
Até consegui realizar o deploy, achei que não conseguiria kkkk. O site até abre normalmente, acessa as rotas, mas se alguma rota recarrega a página ou o usuário atualiza a página, com exceção da página principal, ocorre o retorno 404.
Retorno da vercel após recarregar a página
Com algumas pesquisas e de forma bem simples o que entendi é que as rotas por si só no front end não são entendidas pela vercel, sendo assim ao recarregar a página ocorre o retorno 404 pq não foi possível encontrar a página requisitada no servidor.
Agora, se realmente entendi certo, de forma simples seria isso mesmo?
Mas, o mais importante, o que posso fazer para resolver isso e ter o projeto rodando na vercel? Ou então tem outro lugar para rodar que resolva o problema?
🔗 Links
Github pages
Tentei também colocar no github pages, mas após o deploy por lá a página ficou branca apenas e no inspecionar só apareceu o seguinte erro:
Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'.
Help me kkkkk
Se alguém souber como poderei resolver esses problemas e ter o projeto rodando na vercel ou até mesmo github pages ajudaria muito =)
Isso acontece porque a Vercel interpreta e espera que o seu site tenha várias rotas e páginas, porém sua aplicação é uma SPA (Single Page Application), ou seja, ela possui uma única página, onde o conteúdo é alterado de acordo com a rota (isso ocorre por de baixo dos panos). Para solucionar, crie um arquivo vercel.json na raíz do projeto, e coloque o seguinte código:
{
"rewrites": [
{"source": "/(.*)", "destination": "/"}
]
}
Testa ai e vê se deu certo. Abraço