How to deploy a multi-page react application in IIS server? - reactjs

Question

I have created a multipage application using reactjs and have manage the routing using react router-dom. I tested it using npm start and it is working fine. The pages are properly redirecting. But when I run "npm run build" and add it to IIs server, only the home page is coming. No matter what link I click on, I am getting redirected to the home page.
I tried modifying the web.config file.
`
<?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="/index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
`
But it seems the index.html is not updated with the rest of the pages other than the homepage. My user routes are `
<BrowserRouter>
<Routes>
<Route exact path="/" element={<HomepageAtm />} />
<Route
exact
path="/New-Registration"
element={<RegistrationAtm />}
/>
<Route exact path="/View" element={<VIEW_ATM />} />
<Route exact path="/List_View" element={<LIST_VIEW />} />
<Route exact path="/Airport_View" element={<AIRPORT_VIEW />} />
<Route exact path="/Map_View" element={<MAP_VIEW />} />
<Route exact path="/History_Data" element={<History_Data />} />
<Route exact path="/ContactUs" element={<Contact />} />
<Route exact path="/Terminalarea_View" element={<TERMINALAREA_VIEW />} />
</Routes>
</BrowserRouter>
`
I also tried using HashRouter but the results were same. Except for the home page, no other pages are loading.