How to fix React Router 404 on refresh (Netlify, Vercel, Cloudflare & traditional servers)

Why the 404 happens

A single-page app has exactly one HTML file. When a visitor navigates from / to /pricing, React Router changes the URL with the History API — no request ever reaches the server. Everything works.

But when someone refreshes on /pricing, or opens that link directly, the browser asks the server for a file at /pricing. There is no pricing.html in your dist/ folder — there's only index.html. The server finds nothing and returns 404.

The fix is always the same idea: tell the server "if the requested file doesn't exist, serve index.html instead and let React Router figure out the route." What changes is where you declare that rule — so find your host below. (Not sure which host fits your app in the first place? See our roundup of the best hosting for React apps.)

Managed platforms: one small file

On JAMstack platforms the fix is a single config file committed to your repo — no server access involved.

/*    /index.html   200

/*    /index.html   200

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

Traditional servers: rewrite rules

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;

    root /var/www/myapp/dist;
    index index.html;

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

sudo nginx -t
sudo systemctl reload nginx

Apps served from a subdirectory

If your app lives at yourdomain.com/app/ instead of the root, two things change. First, set the base path in vite.config.js so asset URLs resolve correctly:

export default {
  base: '/app/'
}

And tell React Router about it:

<BrowserRouter basename="/app">

Second, on an Apache or LiteSpeed server, the .htaccess goes inside the subdirectory itself (e.g. public_html/app/) and rewrites to the subdirectory's index:

Options -MultiViews
RewriteEngine On
RewriteBase /app/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Verify the fix

After deploying, run through this quick checklist:

1. Open your homepage and click through to a nested route — should work as before
2. Hit refresh on the nested route — should load, not 404
3. Paste a deep link (e.g. yourdomain.com/pricing) into a new incognito tab — should load
4. Open dev tools → Network tab and confirm your JS/CSS assets return 200, not HTML — if assets return HTML, your rewrite is too aggressive (check the RewriteCond line)

Common mistakes

Summary

SPA 404s on refresh aren't a bug in your app — the server just doesn't know that index.html should handle every route. On Netlify and Cloudflare Pages it's a one-line _redirects file; on Vercel it's a vercel.json rewrite; on Apache or LiteSpeed it's a four-line .htaccess; on Nginx it's one try_files line. Set it up once per project and you'll never see the refresh 404 again.

Frequently asked questions