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/RectApp/User这样的url，现在我希望它像localhost/RectApp/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>