多React应用部署于IIS同一端口的子路由访问配置问题

问题原因 #

你当前根目录的web.config把所有符合条件的请求都重写到了根路径/，但SPA的子路由需要重写到对应SPA目录下的index.html，而不是根目录的入口文件，这就导致子路由请求找不到正确的页面。

方案一：根目录统一配置多规则 #

修改根目录的web.config，为每个SPA添加单独的重写规则，确保子路由请求被转发到对应SPA的入口文件。规则需要按优先级排列，具体SPA的规则放在前面：

<?xml version="1.0" encoding="UTF-8"?>
<configuration> 
    <system.webServer> 
        <rewrite> 
            <rules>
                <!-- 针对spa1的路由规则 -->
                <rule name="SPA1 Routes" stopProcessing="true"> 
                    <match url="^a/b/spa1/(.*)" /> 
                    <conditions logicalGrouping="MatchAll"> 
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> 
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> 
                    </conditions> 
                    <action type="Rewrite" url="/a/b/spa1/index.html" /> 
                </rule>

                <!-- 针对spa2的路由规则 -->
                <rule name="SPA2 Routes" stopProcessing="true"> 
                    <match url="^c/d/spa2/(.*)" /> 
                    <conditions logicalGrouping="MatchAll"> 
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> 
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> 
                    </conditions> 
                    <action type="Rewrite" url="/c/d/spa2/index.html" /> 
                </rule>

                <!-- 保留原有的API排除规则和根路径规则（如果有根SPA的话） -->
                <rule name="Root 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>

方案二：每个SPA目录单独配置web.config #

这种方式更模块化，每个SPA的规则独立管理，不需要修改根目录配置：

1. 在/a/b/spa1/目录下创建web.config，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<configuration> 
    <system.webServer> 
        <rewrite> 
            <rules> 
                <rule name="SPA1 Sub Routes" stopProcessing="true"> 
                    <match url=".*" /> 
                    <conditions logicalGrouping="MatchAll"> 
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> 
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> 
                    </conditions> 
                    <action type="Rewrite" url="index.html" /> 
                </rule> 
            </rules> 
        </rewrite>
    </system.webServer> 
</configuration>

2. 在/c/d/spa2/目录下创建web.config，内容类似：

<?xml version="1.0" encoding="UTF-8"?>
<configuration> 
    <system.webServer> 
        <rewrite> 
            <rules> 
                <rule name="SPA2 Sub Routes" stopProcessing="true"> 
                    <match url=".*" /> 
                    <conditions logicalGrouping="MatchAll"> 
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> 
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> 
                    </conditions> 
                    <action type="Rewrite" url="index.html" /> 
                </rule> 
            </rules> 
        </rewrite>
    </system.webServer> 
</configuration>

注意事项 #

• 确保IIS已安装URL Rewrite模块，没有的话需要从IIS管理器的“模块”中安装。
• 每个SPA的index.html必须存在于对应目录下，路径配置准确。
• 如果有新的SPA添加，对应添加规则即可，方案二更适合扩展。

内容的提问来源于stack exchange，提问作者deul