Executando verificação de segurança...
Em resposta a Deploy de um projeto React/Vite na vercel - Problema nas rotas e recarregar página retornando 404
2
matheuspazinati

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

Carregando publicação patrocinada...
2
OtavioCleyderman

Cara, deu super certo. Funcionou \o/
Inclusive no commit inclui de quem foi a solução e onde consegui: (29/11) Testando solução para deploy na vercel sugerido por matheuspazinati no Tabnews.com.br

Mano, eu estava quebrando muita a cabeça em como resolver e na internet, talvez pelo jeito de eu pesquisar, não encontrava nada. Só a mesma informação de rotas e tudo mais sobre provaveis motivos do erro.

Agora é ir ajeitando o layout e preparando as novas funcionalidades hehehe

Muito obrigado mesmo \o/

2
matheuspazinati
Autor
Autor

Fico feliz pela menção no commit. Isso aconteceu comigo em um projetos dias atrás também kkkkkkkk Se você reparar no código da solução, ele bate com a explicação do problema. Básicamente ele está dizendo: Olha Vercel, quando você receber uma requisição em qualquer rota após "/", devolva para "/", que eu saberei o que fazer com esta requisição. Desculpa pelo texto longo, é que eu gosto de explicar porque algo da certo ou errado kkkkkkkk Abraço.

1
2
josanjohnata

Opa, Matheus! Blz? Pra mim a página está em branco, tentei a solução que vc sugeriu a cima, mas não resolveu, ☹️ Ainda estou tentando outros meios para resolver isso.

1
1
1
1
pedrofdnn

Estou enfretando o mesmo problema mais não consegui tenho pensado e pesquisado mais nada disso ainda funcionou gostaria de compartilhar a configuração das minhas rotas.

{ // pagina padrão como home page path: "/", element: <App />, errorElement: <ErroPage />, // componente base para páginas children: [ { path: "/", element: <HomePage />, }, { path: "/search/:query", element: <SearchPage />, }, { path: "/contact", element: <ContactPage />, }, ], }, ]);

quando chega pra parte de pesquisa ele da esse erro, não sei se e por causa da query ou so Deus sabe oque. se alguem puder me ajudar tambem agradeço de mais. estou em transição de carreira e aprender sozinho e muito tenso. mais acredito que vou conseguir.

1
1
filipeleonelbatista

Fiz uma migração de uma aplicação que eu to desenvolvendo e tive o mesmo problema.Na minha maquina funciona mas na vercel não tava rodando. Migrei do CRA (Create React App) para usar o Vite, aí tive esse retonro toda a vez que digitava o / alguma coisa. Copiei e colei essa regra subi e Foi

Obrigado @matheuspazinati! Excelente pergunta @OtavioCleyderman me ajudou muito!

1
0
0
0