My react Static web app returns 404 after reload except from the home page, i have tried a lot of fixes, somebody help!!!

Question

After hosting my React web app on Azure, certain web pages are encountering 404 errors upon reload, leading to indexation issues with Google. Despite attempting URL rewrite rules and suggestions from GPT, the problem persists. This configuration is essential for client-side routing to function correctly, directing all requests to index.html. However, the error persists, and further investigation is needed to resolve the issue.

Answer 1

@Michael Fadehan Thanks for reaching here!

If you are using Azure Static Web Apps, which is a standalone product and separate from the static website hosting feature of Azure Storage.

Single Page Applications (SPAs) use a technique called client-side routing, where the rules for navigating the app are handled on the user's device rather than making requests to the server for each page change. This makes the app feel faster and more responsive.

However, when you refresh the page or directly visit certain URLs in the app, the server might not know how to handle these routes.

To handle this situation, a fallback route is set up on the server, so if the server doesn't recognize the route, it will serve the main HTML page (usually index.html) for your app.

To resolve this, you need to add fallback routes in staticwebapp.config.json file:

{
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
  }
}

To know more: https://learn.microsoft.com/en-us/azure/static-web-apps/configuration#fallback-routes

Let us know if further query or issue remains.