Skip to content

Fixing broken Client-Side React Router on GitHub Pages Deployment


So you’ve built a React Single-Page-Application (SPA) with React Router and deployed it on GitHub Pages. Initially, everything looks good on the homepage, but once you try navigating to other routes, a 404 error pops up. You’re left puzzled – it worked perfectly on your local machine! You’ve tried refreshing, incognito mode, even checking GitHub Actions for errors, but the issue persists.

Here’s the deal:

Note: Deploying a serverless web app on Vercel may encounter a bug where routes other than index don’t work. To fix it, create a vercel.json at the root of the project (Source):

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