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

Question

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

Answer 1

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.

Answer 2

@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.