SPA 404 on refresh: Vercel, Netlify, Cloudflare Pages
On Vercel this shows as the NOT_FOUND error. The host looks for a file at /dashboard, finds none, and returns 404 because routing happens in the browser. Add a rewrite that serves /index.html for unknown paths: vercel.json rewrites on Vercel, a _redirects rule on Netlify, and on Cloudflare Pages remove any top-level 404.html.
Cause: No SPA fallback rewrite to index.html is configured on the host.
How to fix it
- Vercel: add a catch-all rewrite to
/index.htmlinvercel.json. - Netlify: add
/* /index.html 200topublic/_redirects. - Cloudflare Pages: SPA fallback is the default unless a top-level
404.htmlexists; remove it or add a_redirectsrule. - Redeploy and test a deep link in a fresh tab.
Example
Illustrative example, not from a customer project.
+ // vercel.json
+ { "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }] }
+ # public/_redirects (Netlify)
+ /* /index.html 200
FAQ
Why does the home page work?
/ maps to index.html; only deep links need the fallback.
Will the rewrite break my API routes?
Order matters: put API routes or functions before the catch-all.
Get a $149 diagnosis See pricing Launching soon? The Launch Path gets you ready for $1,195 flat.
- Fixed, or we keep working free until it is (within the written scope).
- A human reviews every fix before it ships.
- read-only access; fixes arrive as pull requests you merge
- Your $149 diagnosis is credited in full toward any paid job.