Summary
This content provides a solution to fix not found errors when deploying Single Page Applications (SPA) with react-router to Vercel by creating a vercel.json file and adding redirect rules.
Abstract
The content discusses an issue encountered when deploying SPA with react-router to Vercel. The issue is that servers do not know how to handle sub-pages (URLs) like yourdomain.com/my-page, resulting in not found errors. The solution to this problem is to create a vercel.json file in the root directory and add redirect rules as shown in the provided example. This allows the servers to handle the sub-pages correctly.
Bullet points
{
"routes": [
{ "src": "/[^.]+", "dest": "/", "status": 200 }
]
}
When you deploy your build files to the vercel server, sub-pages emit not found errors.
It means servers don’t know how to handle sub-pages (URLs) like yourdomain.com/my-page.
Make vercel.json file in your root directory, then add redirect rules like below.
{
"routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }]
}That’s it!
Let's Code FutureNo need to dive into the ReactJS vs. NextJS debate here. If you’re aiming to optimize your website or web app for:
