Why React Router Breaks After Deployment (and How to Fix It)

Why React Router Breaks After Deployment (and How to Fix It)

A common deploy bug: the home page works, but any deep link returns a 404. Here is why React Router breaks after deployment and how to fix it.

Why It Happens

In development, the dev server serves index.html for all routes. In production, the host serves files from a folder, and any route that is not a real file returns a 404. Client-side routes are not real files.

The Fix: Redirect to index.html

Configure the host to redirect all routes to index.html. Then React Router loads, reads the URL, and renders the right component. This is the standard fix.

Vercel

Vercel usually handles this for React apps automatically. If not, add a rewrite rule in vercel.json that redirects all routes to index.html.

Netlify

Add a _redirects file in your public folder with the line '/* /index.html 200', which redirects all routes to index.html with a 200 status.

Firebase Hosting

In firebase.json, configure the rewrites section to redirect all routes to /index.html. This makes Firebase serve index.html for any route.

Verify After Deploy

After deploying, visit a deep link directly, like /browse, and confirm it renders the right page. If it 404s, your rewrite rule is missing or wrong.

The Takeaway

React Router breaks on deploy because the host serves 404 for routes that are not files. Fix it by redirecting all routes to index.html, with a rewrite rule in Vercel, a _redirects file in Netlify, or rewrites in firebase.json.