配置带React Router的React应用及IIS URL重写实现子应用路由

一、调整IIS配置（包含重写规则与反向代理开启） #

1. 开启IIS反向代理基础能力 #

先安装「Application Request Routing (ARR)」IIS模块，安装完成后进入ARR功能设置页，勾选「Enable proxy」开启反向代理，否则跨域名的Rewrite规则无法生效。

2. 修改重写规则 #

修正后的根应用web.config配置如下：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
      <rewrite>
          <rules>
              <!-- 子应用example1转发规则 -->
              <rule name="example1" stopProcessing="true">
                  <match url="example1(.*)" />
                  <action type="Rewrite" url="https://www.example1.com{R:1}" appendQueryString="true" logRewrittenUrl="false" />
              </rule>
              <!-- 子应用example2转发规则 -->
              <rule name="example2" stopProcessing="true">
                  <match url="example2(.*)" />
                  <action type="Rewrite" url="https://www.example2.com{R:1}" appendQueryString="true" logRewrittenUrl="false" />
              </rule>
              <!-- 根应用SPA回退规则，仅处理根应用自有路由 -->
              <rule name="SPA Root" 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="^/example1" negate="true" />
                      <add input="{REQUEST_URI}" pattern="^/example2" negate="true" />
                  </conditions>
                  <action type="Rewrite" url="/index.html" />
              </rule>
          </rules>
      </rewrite>
  </system.webServer>
</configuration>

核心修改点：

• 子应用规则的stopProcessing改为true，匹配到子应用路径后直接终止规则链，不会走到后续根应用的SPA回退逻辑
• 新增根应用SPA回退规则，额外排除子应用路径，双重保障不会把子应用请求回退到根应用的index.html
• 修正路径匹配逻辑，兼容example.com/example1这类不带尾部斜杠的访问场景

二、调整根应用React Router配置 #

避免React Router拦截子应用路径，两种方案二选一即可：

方案1：新增子应用路径匹配规则 #

<BrowserRouter>
    <Switch>
        <Route exact path="/">
            <Dashboard />
        </Route>
        <Route path="/myapp">
            <Myapp />
        </Route>
        <Route path="/dualapp">
            <DualApp />
        </Route>
        {/* 匹配到子应用路径时强制发起服务端请求，不走前端路由 */}
        <Route path="/example1*">
            {window.location.replace(window.location.href)}
        </Route>
        <Route path="/example2*">
            {window.location.replace(window.location.href)}
        </Route>
    </Switch>
</BrowserRouter>

方案2：修改子应用跳转入口 #

所有跳转到/example1、/example2的入口不要使用React Router提供的Link/NavLink组件，改用原生<a href="/example1">标签，自然不会触发前端路由拦截。

三、子应用适配配置（必做） #

两个子应用需要同步做路径适配，否则内部路由、静态资源加载会出错：

1. 子应用React Router添加基准路径配置：

// example1子应用对应配置
<BrowserRouter basename="/example1">
  {/* 子应用原有路由逻辑保持不变 */}
</BrowserRouter>

// example2子应用对应配置
<BrowserRouter basename="/example2">
  {/* 子应用原有路由逻辑保持不变 */}
</BrowserRouter>

2. 子应用package.json中添加配置"homepage": "."，打包后静态资源会自动使用相对路径，避免错误请求根应用的静态资源。
3. 子应用.NET Core服务端添加路径基准配置，在Program.cs/Startup.cs中添加：

app.UsePathBase("/example1"); // example2子应用对应改为/example2

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