React JS App Routing Issue Only After Deploying to Azure Web App - reactjs

Question

I have a React JS app, with React Router.During development, npm start, I get no issues. I visit the following location as usual.
http://localhost:3000
and due to the routing code, it becomes
http://localhost:3000/index
and the app loads just fine. At this point,
I hit reload, the app continues to run fine.
I manual link or load 'http://localhost:3000/index', the app runs fine.
Then, later, I do an npm build, go inside this build folder, and do an npm start, again, the same thing. the app runs just fine. I reload, it runs fine. Nothing to complain so far.
Problem Portion.
I then decided to deploy the app to an azure web app. The app runs fine. I go to this site.
https://randomstuffreactjsappsept24.azurewebsites.net
and due, to routing code, it becomes
https://randomstuffreactjsappsept24.azurewebsites.net/index
And, the website loads.
At this point, if I hit reload (problem!!), it will try to reload,
https://randomstuffreactjsappsept24.azurewebsites.net/index
I get the following error.
The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.
Now, at this point, if I remove the '/index' and load the original url,
https://randomstuffreactjsappsept24.azurewebsites.net
The site loads just fine, no problem. Note, you can see it for yourself. this is a live site. (but of course, due to routing code, it becomes)
https://randomstuffreactjsappsept24.azurewebsites.net/index
Now, as long as I dont reload the website, the website continues to run. Why is this happening?
Here is the code for the main index.js page from the project.
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route path="/index" render={(props) => <Index {...props} />} />
<Redirect to="/index" />
</Switch>
</BrowserRouter>,
document.getElementById("root")
);
The full app is available here - https://github.com/Jay-study-nildana/RandomStuffReactJSApp
Update 2
I decided to try another react app, created by another source entirely. Once again, same issue, and I have a live site to show.
I visit, https://auth0tokenreactjsappprivatesept25.azurewebsites.net/external-api, from within the web app, it works fine. If i were to reload at this point, it will say "The resource you are looking for has been removed, had its name changed, or is temporarily unavailable."
I visit, http://localhost:3000/external-api, from within the app, it works fine. AND, If I were to reload, it loads just fine.
So, its definitely "only" happening after deployment.

Answer 1

According to: https://github.com/react-boilerplate/react-boilerplate/issues/1612
You would have to place the:
Simply place the following file called web.config under your wwwroot folder:
<?xml version="1.0"?> <configuration> <system.webServer> <rewrite> <rules> <rule name="React Routes" stopProcessing="true"> <match url=".*" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /> </conditions> <action type="Rewrite" url="/" /> </rule> </rules> </rewrite> </system.webServer> </configuration>
Add the web.config file to the azure directory

Answer 2

I came accross this issue yesterday after using a custom build in my azure web app deployment (skipped it using skip_app_build = false and build it in a previous job).
My error was that my staticwebapp.config.json file was not located in the public folder -> it was not deployed correctly. after inserting any route a 404 was thrown by azure.
Just move the staticwebapp.config.json into the public folder and you are good to go.

Answer 3

I had the same problem. Our Azure App Servive was running PHP and Apache, so we used a .htaccess file like this one suggested in the deployment docs of Create React App. https://create-react-app.dev/docs/deployment#serving-apps-with-client-side-routing
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
Add the .htaccess to the public folder and this stops your refresh issue these types of Aapp Services.