URL rewrite for Nested URL in ReactJS

Question

i am running react application on IIS, i used URL rewrite for routes configuration, this is my web.config file:

<?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" />
                <add input="{REQUEST_URI}" pattern="^/(docs)" negate="true" />
              </conditions>
              <action type="Rewrite" url="index.html" />
            </rule>
          </rules>
        </rewrite>
    </system.webServer>
</configuration>

this code works fine for url like localhost/ReactApp/User, now i want it to work like localhost/ReactApp/User/Edit but it does not work for child pages it shows blank page, this issue only comes after build and deployment, please let me know how it can work for /User/Edit nested or Child pages?

Answer 1

when you serve the react app from the subfolder you need to set the base name in your routs <BrowserRouter basename='/path/to/subfolder/'> or

try below iis url rewrite rule:

<rewrite>
  <rules>
    <rule name="Imported Rule 1" stopProcessing="true">
      <match url="^" ignoreCase="false" />
      <conditions logicalGrouping="MatchAny">
        <add input="{DOCUMENT_ROOT}{URL}" matchType="IsFile" ignoreCase="false" />
        <add input="{DOCUMENT_ROOT}{URL}" matchType="IsDirectory" ignoreCase="false" />
      </conditions>
      <action type="None" />
    </rule>
    <!--# Fallback all other routes to index.html-->
    <rule name="Imported Rule 2" stopProcessing="true">
      <match url="^" ignoreCase="false" />
      <action type="Rewrite" url="/path/to/subfolder/index.html" />
    </rule>
  </rules>
</rewrite>