Making React Router working with IIS - reactjs

Question

I've been looking for a way to make my app working with IIS. I can access my homepage just fine but when I navigate to my route http://10.7.138.131/home/wellchart I'll received 403 error.
So I have a web.config that looks like this :
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="ReactRouter 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="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
My createBrowserHistory :
export const History = createBrowserHistory({
basename:"/home"
});
And lastly my react routing :
<Router basename={"/"} history={History}>
<div>
<Route path="${process.env.PUBLIC_URL}/wellchart" component={WellChartPage} />
<Route path="${process.env.PUBLIC_URL}/welldetail" component={WellDetailPage} />
<Route path="${process.env.PUBLIC_URL}/tableau" component={TableauPage} />
</div>
</Router>
Thanks :)

Answer 1

You need setup url rewrite on IIS.
In react application we have single entry point index.html. If you try to open other page, IIS will try to find that file but we don't have any physical file there so IIS will return 404.
URL rewrite will solve this problem
https://learn.microsoft.com/en-us/iis/extensions/url-rewrite-module/creating-rewrite-rules-for-the-url-rewrite-module
https://www.iis.net/downloads/microsoft/url-rewrite