Problem in hosting React App with react-router-dom on IIS Server

Question

I have hosted the react app on IIS server inside wwwroot/{myFolder}. I am currently facing the below error :Unexpected Application Error!(404 Not Found )

I already have a web.config file inside wwwroot/{myfolder} which looks like this.

<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>

And I have also installed URL Rewrite Module.

Answer 1

If you deploy React Router app to the subfolder on the server, routes will get messed up .

For example, let's say you have a React Router app called "my-app" and you want to deploy it to the subfolder "example" on your server. In a development environment, you might use the following routing configuration:

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
    <Route path="/contact" element={<Contact />} />
  </Routes>
</BrowserRouter>

In the development environment, React Router may interpret /about as http://localhost:3000/about, while when deploying to a subfolder of the server, React Router may try to interpret /about as http://yourdomain.com/example/about, which may cause the routes to not be matched correctly, resulting in confusion.

Here are two solutions I use in these cases.

Solution 1:

To solve this problem, you may consider using the basename attribute of in the routing configuration to explicitly specify the base URL:

<BrowserRouter basename="/example">
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
    <Route path="/contact" element={<Contact />} />
  </Routes>
</BrowserRouter>

By setting basename, React Router will use the correct path when matching routes, whether in a development environment or in a subfolder when deployed to the server.

Solution 2:

The easiest way to achieve this is to use HashRouter instead of BrowserRouter.

<HashRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
    <Route path="/contact" element={<Contact />} />
  </Routes>
</HashRouter>

With HashRouter, you will include /#/ in every URL (like http://yourdomain.com/example/#/about ) . In this case, the "example" subfolder name becomes the base path, and the part after the hash part (#) is used to match routes in React Router. The advantage of this is that no matter which subfolder of the server your application is deployed to, the routes can be resolved correctly without confusion.

Related links for reference：

https://medium.com/@mateioprea/setting-up-a-react-app-with-react-router-in-iis-71cb86aee376

https://muffinman.io/blog/react-router-subfolder-on-server/