This content originally appeared on DEV Community and was authored by pwnkdm
Deploying a Vite React app on Vercel is straightforward, but many developers face a common issue: navigating to another page and refreshing results in a 404 error. This happens because Vercel serves only index.html and doesn't recognize client-side routing handled by React Router.
The Problem
When using React Router, routes are managed on the client-side. However, Vercel doesn’t know how to handle these routes after a refresh, leading to a 404 error.
The Solution: Configure vercel.json
To fix this, create a vercel.json file inside your frontend root directory (same level as index.html) and add the following:
{
"rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}
Explanation of vercel.json
-
rewrites: Defines URL rewriting rules. -
source:"/(.*)"captures all routes. -
destination: Redirects all requests toindex.html, allowing React Router to handle routing.
Deploy Again
After adding vercel.json, redeploy your Vite app using:
vercel --prod
Now, navigating and refreshing pages will work without 404 errors. 🎉
This simple fix ensures your Vite React app works smoothly with React Router on Vercel. Happy coding! 🚀
This content originally appeared on DEV Community and was authored by pwnkdm
pwnkdm | Sciencx (2025-03-09T18:35:00+00:00) Fixing Routing Issues in Vite React App on Vercel. Retrieved from https://www.scien.cx/2025/03/09/fixing-routing-issues-in-vite-react-app-on-vercel/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.