How do I fix React Router on 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, so React Router loads and handles the route client-side.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in Why React Router Breaks After Deployment (and How to Fix It)
Because the host serves a 404 for routes that are not real files. In development, the dev server serves index.html for all routes, but in production, client-side routes are not files, so the host returns 404. Fix by redirecting all routes to index.html.
Add a _redirects file in your public folder with the line '/* /index.html 200'. This redirects all routes to index.html with a 200 status, so React Router handles the routing client-side.
In firebase.json, configure the rewrites section to redirect all routes to /index.html. This makes Firebase serve index.html for any route, so React Router loads and handles it client-side.
Still have questions?
Browse all our FAQs or reach out to our support team