React page loads but I get a 404 Response Code on anything but the homepage on refresh

Jeff Horner 6 Reputation points
2021-12-14T16:24:17.717+00:00

We have a react app hosted in Azure Blog Storage as a static web app. Our issue is once the site is deployed, the initial homepage loads with a 200 status code but if i navigate using react routing to any other route and then refresh the page, the page content loads correctly but the server shows a 404 response code for that route.

What I've tried to do to fix the issue:

The index document name and Error document path have index.html as the value & i added the staticwebapp.config.json to the react app public directory (also tried to just add it to the root app directory but it didn't show up in the built artifacts unless i put it in the /public folder) with the following configuration:

{
"navigationFallback": {
"rewrite": "index.html",
"exclude": ["/static/media/.{png,jpg,gif,svg,gz,js,css}", "/static/css/"]
},
"mimeTypes": {
".json": "text/json"
},
"routes": []
}

I haven't added any rewrite rules to the rules engine since I was hoping this could be solved without it. Looking for any help on the subject matter.

Thanks in advance!

Jeff

Azure Storage Accounts
Azure Storage Accounts
Globally unique resources that provide access to data management services and serve as the parent namespace for the services.
2,721 questions
0 comments

2 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Jeff Horner 6 Reputation points
    2021-12-15T21:42:11.93+00:00

    Thanks for the response, however, this is not the same issue described in the linked StackOverflow. My react components and content load correctly on all pages (whether a route change or a hard refresh), but soft 404s persisted on page refresh (minus the homepage) after adding the static web app config.

    I fixed the issue by adding a rewrite rule to the rules engine. The Azure documentation on SWA surrounding this issue seemed pretty misleading and somewhat of a blackhole.

    1 person found this answer helpful.
  2. deherman-MSFT 33,701 Reputation points Microsoft Employee
    2021-12-15T20:54:35.02+00:00

    @Jeff Horner
    I believe your issue is the same that is outlined in this StackOverflow thread. Please correct me if I am wrong or misunderstanding. As stated you can make rewrite rules to work around this. Alternatively you can consider using Azure Static Web Apps. See the quickstart for a tutorial which walks you through setting up a react application.
    Quickstart: Building your first static site with Azure Static Web Apps

    Hope this helps! Let us know if you have further questions or issues.

    -------------------------------

    Please don’t forget to "Accept the answer" and “up-vote” wherever the information provided helps you, this can be beneficial to other community members.

    0 comments