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

OtavioCleydermanhá 2 anos

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/

matheuspazinatihá 2 anos
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.
OtavioCleydermanhá 2 anos
kkkkk Nem foi longo o texto e mesmo assim ajudou pra caramba \o/ Vlw mais uma vez, abraços e tamo junto.
josanjohnatahá 2 anos

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.

guilhermeDanielhá 2 anos
Conseguiu resolver amigo?
Anscientisthá 2 anos

Muito obrigado, deu super certo! 🙏🙏

HigorSantannaano passado

Valeu Matheus, resolveu meu problema aqui. Tu foi herói agora.

pedrofdnnano passado

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.

messiasomatheushá 9 meses

Caí na mesma situação hoje e resolveu também! Valeu a ajuda!!

filipeleonelbatistahá 2 anos

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!

LucasWoibauhá 2 anos

Poxa vida, tambéme estou com o mesmo problema, estou com um site simples, sem framework nem nada, mesmo colocando esse vercel.json não resolveu :( Link do meu repositório: https://github.com/Lucas-Woibau/Border-Radius-Previewer

mikaelrhá 2 anos

Deu certo valeu !!!

laisfrrhá 9 meses

Poxa, ainda continua ajudando viu?! obrigada.

kleysonhá 4 meses

olha eu aqui 2 anos depois e sua resposta me ajudou, value!