Add the rewrite rule your single-page app needs on Vercel or Netlify so every route loads instead of showing 404 on refresh.
My app works but refreshing /dashboard gives a 404 on my live site, fix it
How it works
- Reproduce the 404: Vovy opens a deep link like yoursite.com/dashboard directly and confirms the host returns 404: NOT_FOUND even though clicking there works.
- Explain why it happens: Apps made with Vite and React Router have one real page, index.html. A card shows how the host looks for a /dashboard file that doesn't exist.
- Add the rewrite rule: Vovy adds a rewrite in vercel.json that sends every path to index.html, or a _redirects file with /* /index.html 200 for Netlify.
- Deploy the fix: Vovy asks, pushes the change, and waits for the new deployment to finish.
- Test deep links: Vovy refreshes three or four routes on the live site and shows a pass table, including that real files like images still load.
What you provide
- Your app's code
- The page that 404s
What you get
- Every route loads on refresh
- The exact rewrite file added
- A pass table of tested links
FAQ
Why does it only break on refresh?
Clicking inside the app is handled by JavaScript in the browser. Refreshing asks the server for that path, and there's no file there.
Does Next.js have this problem?
Usually not, because Next.js tells Vercel about its routes. This mostly affects Vite, Create React App and other single-page apps.
Will this break my real 404 page?
Your app handles unknown routes now, so add a Not Found page in your router. Vovy can do that too.
Related tasks
All tasks