React webconfig does not work on IIS server - reactjs

Question

I have a web.config in my React application (imported in index.tsx):
<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" />
</conditions>
<action type="Rewrite" url="index.html" />
</rule>
</rules>
</rewrite>
<staticContent>
<remove fileExtension=".json" />
<remove fileExtension=".woff2" />
<remove fileExtension=".png" />
<remove fileExtension=".svg" />
<remove fileExtension=".ico" />
<remove fileExtension=".webmanifest" />
<mimeMap fileExtension=".json" mimeType="application/json" />
<mimeMap fileExtension=".woff2" mimeType="font/woff2" />
<mimeMap fileExtension=".png" mimeType="image/png" />
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
<mimeMap fileExtension=".ico" mimeType="image/vnd.microsoft.icon" />
<mimeMap fileExtension=".webmanifest" mimeType="application/manifest+json" />
</staticContent>
</system.webServer>
</configuration>
The application is served on a subdomain (https://example.com/app/) and if I try to go to a subroute (like https://example.com/app/page1) which works perfectly fine in development mode, returns a page not found error on the server.
What am I doing wrong?

Answer 1

Since you provided less error message, I can only share some of my thoughts with you. My expression may not be accurate enough, hope you can understand my weak English.
Once you have a production build of your ReactJS application. It creates an index.html file that serves the entire application. All requests must be index.html first, and then React Router serves the content based on the query in the URL. When we access the app using the main URL, it hits index.html and works fine. If you go directly to a sub URL in your browser, the web server cannot find any file with that name. In this case, a 404 error message will be returned to the user.
Due to the update after version 6.0, the parent route must add /* , otherwise it will not navigate deeper, the parent route will no longer match, so the child route will never be rendered.
<Route path="/home" element={<Home/>}></Route>
change to
<Route path="/home/*" element={<Home/>}></Route>
If you expect all routes to be defined by React Router, only your backend, no matter what route, returns index.html. The rest is left to React Router. Then all you have to do is modify the backend server. If using HashRouter, change BrowserRouter to HashRouter. In this way, all requests will be directed to the index.html page, and the server side does not need any configuration.
In addition, the child routing page refreshes and reports an error, and normal access from the parent does not report an error. The reason may be that the js import path in the main file index.html is written as an absolute path; it needs to be imported by a relative path, or the address of a js file imported is wrong and needs to be checked.
I share with you a thread, it provides a very detailed explanation and potential solution.