Why do deep links break on a deployed React SPA?
Because the host serves a 404 for routes that are not real files, since routing is client-side. Configure the host to redirect all routes to index.html, so client-side routing handles them. Vercel and Netlify usually do this automatically.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in How to Deploy a React App (Vercel, Netlify, and Firebase Compared)
Run npm run build to create the production bundle, then deploy the build folder to a host like Vercel, Netlify, or Firebase Hosting. Set environment variables in the host's dashboard, and configure SPA routing so deep links work.
Vercel is the easiest default for React apps, with automatic builds on every push, SSL, custom domains, and serverless functions. Netlify is a strong alternative, and Firebase Hosting is natural if you already use Firebase.
It creates an optimized, minified production bundle in a build or dist folder. This is what you deploy, not your source files. The build is smaller and faster than the development bundle.
Still have questions?
Browse all our FAQs or reach out to our support team