Fixing 404 Errors on React Child Routes in Azure Static Web Apps

 When deploying a React app to Azure Static Web Apps (SWA), you may encounter a frustrating issue: visiting a child route directly (like /dashboard or /profile) results in a 404 Not Found error — even though the app works fine in development.

(image: websitebeaver.com)

🔍 Why It Happens

Azure Static Web Apps serves files statically. So when you access /dashboard, it looks for a real file like /dashboard/index.html. Since that file doesn't exist (React handles it via client-side routing), Azure returns a 404.

✅ The Solution: staticwebapp.config.json

To fix this, you need to tell Azure to fallback to index.html for all unknown routes, so your React Router can handle them.

Create a file named:

public/staticwebapp.config.json

Add the following:

{

  "navigationFallback": {

    "rewrite": "/index.html",

    "exclude": ["/static/*", "/images/*", "/css/*", "/js/*"]

  }

}

🔁 What This Does

For any route not matching a physical file, Azure will serve index.html.

It excludes real assets like JS, CSS, and images so those load correctly.

https://learn.microsoft.com/en-us/azure/static-web-apps/configuration