Fix NotFoundError in React When Deploying

React 404 Errors After Deployment

React Router handles routing client-side, but when users refresh or directly access a URL, the server needs to return index.html for all paths. Without this, you get 404 errors.

Netlify

# netlify.toml
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Or create public/_redirects:

/*    /index.html   200

Vercel

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

Nginx

server {
  listen 80;
  root /usr/share/nginx/html;

  location / {
    try_files $uri /index.html;
  }
}

homepage in package.json

If deployed to a subdirectory:

{
  "homepage": "https://example.com/myapp"
}

And set the basename in React Router:

<BrowserRouter basename="/myapp">
  <Routes>
    <Route path="/" element={<Home />} />
  </Routes>
</BrowserRouter>

HashRouter as Alternative

If you can't configure the server, use HashRouter instead of BrowserRouter:

import { HashRouter } from 'react-router-dom';
// URLs become /#/about instead of /about

GitHub Pages

{
  "homepage": "https://username.github.io/repo-name",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
}

Bugsly monitors error rates after deployments, catching 404 spikes immediately so you can fix the hosting configuration before users are impacted.