React app deployed to IIS StaticFile handler problem - reactjs

Question

I have a sample React application. I deployed the application to IIS. Default page is OK, but /category page returns 404 - File or directory not found.
import { Route, BrowserRouter } from "react-router-dom";
const Home = () => (
<div>
<h2>Home</h2>
</div>
);
const Category = () => (
<div>
<h2>Category</h2>
</div>
);
export default function App() {
return (
<BrowserRouter>
<Route path="/"><Home /></Route>
<Route path="/category"><Category /></Route>
</BrowserRouter>
);
}
Web.config file content. runAllManagedModulesForAllRequests solution not working unfortunately.
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<modules runAllManagedModulesForAllRequests="true">
<remove name="UrlRoutingModule"/>
</modules>
</system.webServer>
</configuration>
Detailed Error Information
Module: IIS Web Core
Notification: MapRequestHandler
Handler: StaticFile
Error Code 0x80070002
ny suggestion please

Answer 1

Using URL rewrite modul, redirect all requests to index.html 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="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>