Why does refresh cause 404 in an SPA?

On refresh, the browser requests the current route directly from the server. Without rewrite rules, the server returns 404 for client-only routes.

How do I fix SPA 404 on Cloudflare Pages?

Add a public/_redirects file with /* /index.html 200 so every route is served through index.html.

Choorai | Docs

KO EN

Common After Deployment

Fixing SPA 404 Errors

Getting 404 when refreshing your React/Vue app after deployment? This is a routing configuration issue with SPAs (Single Page Applications).

TL;DR

Configure all routes to redirect to index.html. The setup method varies by hosting service.

심각

404 Page Not Found

원인

SPAs use client-side routing. The server doesn't know about paths like /about or /dashboard, so it returns a 404.

해결책

Configure all routes to redirect to index.html in your hosting settings
Cloudflare Pages: Create a _redirects file
Vercel: Set up rewrites in vercel.json
Nginx: Configure try_files

Solution by Hosting Provider

Cloudflare Cloudflare Pages

Create a _redirects file in the project root or public folder.

public/_redirects

/* /index.html 200

Vercel

vercel.json

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Netlify

public/_redirects

/*    /index.html   200

Or use a netlify.toml file:

netlify.toml

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Nginx

nginx.conf

server {
    listen 80;
    server_name your-domain.com;
    root /var/www/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

Why does this happen?

SPAs handle URLs with JavaScript in the browser. But when you refresh, the browser requests that path from the server, and the server returns a 404 because there's no actual file at that path. The solution is to route all requests to index.html so JS can handle the routing.

Prerequisites

Your app uses client-side routing (React Router, Vue Router, etc.).
You can modify platform config files (_redirects, vercel.json, nginx.conf).
You can test deep-link refresh behavior on production URLs.

Validation

Direct access to deep routes loads index.html successfully.
Hard refresh no longer returns 404 for app routes.
Static assets still resolve correctly while only route paths are rewritten.

Troubleshooting

Ensure rewrite files are included in final build output.
Check redirect/rewrite rule order on your hosting platform.
Keep API routes separate so they are not rewritten to index.html.

References

Build Failure

npm run build error

CORS Error

CORS issue when calling API

Last updated: February 22, 2026 · Version: v0.0.1

Send Feedback

Opens a new issue page with your message.

Open GitHub Issue