ReactJS 中嵌套 URL 的 URL 重写

Question

我在 IIS 上运行 react 应用程序，我使用 URL 重写进行路由配置，这是我的 web.config 文件：

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

此代码适用于 localhost/ReactApp/User 等 url， 现在我希望它像 localhost/ReactApp/User/Edit 一样工作，但它不适用于显示空白页面的子页面， 此问题仅在构建和部署之后出现，请告诉我它如何适用于 /User/Edit 嵌套页面或子页面？

Answer 1

当您从子文件夹中提供 react 应用程序时，您需要在路由中设置基本名称 <BrowserRouter basename='/path/to/subfolder/'> 或

试试下面的iis url重写规则：

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