Matías Baldanza

Error 404 with react-router on Vercel

Today, after uploading a React project to Vercel, I found a weird error. Even though all pages and routes loaded correctly, if I hit reload on any page other than '/', I got a 404 error. The only thing that made the site work again was going back to the home page and reloading the page. What's funny is, everything worked fine locally! Apparently, this is a known issue with react-router and Vercel, and is solved by using Vercel rewrites.

Thank you, @pheralb_ for the solution!

Problem

Here is a video showing the problem

That dreaded 404 error

Solution

To fix this, we can use vercel rewrites to redirect all requests to '/'. To do this, we need to create a file called vercel.json in the root of the project with this content:

{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}

References