部署在IIS子应用的ASP.NET Core+React应用显示空白页求助

核心原因分析 #

页面空白但资源加载正常，大概率是React路由未适配子应用路径，或者ASP.NET Core未正确处理子应用的路由回退请求。

具体修复步骤 #

1. 配置React路由的基础路径（basename） #

在React的路由配置文件（通常是src/index.js或src/App.js）中，给路由组件添加basename属性，值为子应用名称/ExampleApp：

// React Router v6示例
import { BrowserRouter } from 'react-router-dom';

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter basename="/ExampleApp">
    <App />
  </BrowserRouter>
);

修改后重新构建React项目，再发布到IIS子应用目录。

2. 调整ASP.NET Core的静态文件与回退路由 #

在ASP.NET Core的Program.cs中，确保静态文件中间件和SPA回退路由适配子应用场景：

var builder = WebApplication.CreateBuilder(args);

// 注册SPA静态文件服务
builder.Services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "ClientApp/build"; // 指向React构建产物目录
});

var app = builder.Build();

// 启用静态文件服务
app.UseStaticFiles();
app.UseSpaStaticFiles();

app.UseRouting();

// 配置默认控制器路由
app.MapControllerRoute(
    name: "default",
    pattern: "{controller}/{action=Index}/{id?}");

// 配置SPA回退路由，确保子应用路径下的请求能映射到React入口
app.MapSpaFallbackRoute(
    name: "spa-fallback",
    defaults: new { controller = "Home", action = "Index" });

app.Run();

3. 添加IIS URL重写规则 #

在子应用目录（inetpub/wwwroot/ExampleApp）下创建或修改web.config，添加重写规则，确保所有子应用路径下的非文件/目录请求都转发到index.html：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="React SubApp 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="^/(ExampleApp)" negate="false" />
          </conditions>
          <action type="Rewrite" url="/ExampleApp/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

4. 验证IIS子应用基础配置 #

• 确认子应用的应用程序池托管模式设置为无托管代码（适配.NET Core应用）。
• 检查子应用物理路径是否正确指向inetpub/wwwroot/ExampleApp。

验证修复 #

完成配置后重启IIS子应用，访问http://localhost/ExampleApp，页面应能正常渲染。若仍有问题，查看浏览器控制台的JS报错信息，针对性排查。

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