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.
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.
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.
Browse all our FAQs or reach out to our support team
Your learning library
Find your next course. Build something great.
