I had just deployed a React application to Vercel, complete with routing and a custom 404 error page. I tested the live site in Vercel and tried visiting a non-existent route, but I couldn’t! Vercel’s default 404page was rendered instead of my custom component.

Here’s how I fixed it

I needed to find a way to overwrite the default action by Vercel, so I conducted some research. So here’s what was happening - Vercel served its own 404 page before my React app loaded.

To fix this, first create a vercel.json file. Use the following code snippet in your file

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

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

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

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

That was it! I redeployed the application, and now my 404 component was rendered instead of the default one from Vercel.

I hope this solution helped you. If so, please leave a comment below.

Thanks for reading, ciao 👋

P.S. If your cursor starts acting up in VS Code, check out this article