React Vercel 404 Error on Refresh Fix 🔥| SPA Routing Problem Solved (2026)
If your React pages show 404 after refreshing the page, this tutorial will help you solve it.
In this video, I show how to fix the 404 NOT_FOUND error in a React app deployed on Vercel .
If your React dashboard shows 404 after refreshing the page, this tutorial will help you solve it step by step.
Many developers face this common issue where the React app works perfectly after deployment, but when they refresh a route like /dashboard or /profile, they get a 404 deployment error on Vercel. This happens because React uses client-side routing (SPA), while Vercel tries to find a matching server route.
Use This Code :
{
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
}
In this tutorial, you will learn:
Why React shows 404 error on refresh
How Vercel handles routes
How to fix 404 NOT_FOUND error in Vercel
How to properly configure routing for React deployment
SPA routing solution for Vercel
This video is perfect for beginners and frontend developers who are deploying React apps on Vercel and facing routing problems.
Connect With Me:
Hi, I’m Md Josim Uddin – a MERN Stack Web Developer and Coding Enthusiast. I share tutorials, coding tips, and career advice for aspiring developers.
GitHub: https://github.com/mdjosimuddin198/
LinkedIn:https://www.linkedin.com/in/mdjosimuddin198/
Search Terms : react 404 error on refresh, vercel , react js, i get 404: not found when i refresh my site from browser , vercel deployment,404 error vercel,404 deployment not found ,react deployment on vercel, vercel deployment error, react routes problem, vercel routes problem, frontend deployment problem
If this video helps you, make sure to Like, Comment, and Subscribe for more React and Frontend development tutorials.