![[The AI Show Episode 142]: ChatGPT’s New Image Generator, Studio Ghibli Craze and Backlash, Gemini 2.5, OpenAI Academy, 4o Updates, Vibe Marketing & xAI Acquires X](https://www.marketingaiinstitute.com/hubfs/ep%20142%20cover.png)
![[FREE EBOOKS] The Kubernetes Bible, The Ultimate Linux Shell Scripting Guide & Four More Best Selling Titles](https://www.javacodegeeks.com/wp-content/uploads/2012/12/jcg-logo.jpg){kind=logo}
![From drop-out to software architect with Jason Lengstorf [Podcast #167]](https://cdn.hashnode.com/res/hashnode/image/upload/v1743796461357/f3d19cd7-e6f5-4d7c-8bfc-eb974bc8da68.png?#)
.png?#)
.jpg?#)
_Christophe_Coat_Alamy.jpg?#)
![Rapidus in Talks With Apple as It Accelerates Toward 2nm Chip Production [Report]](https://www.iclarified.com/images/news/96937/96937/96937-640.jpg)
Fixing Routing Issues in Vite React App on Vercel
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 to index.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.
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.
