ASP.NET Core 8 MVC中Blazor与React子应用路由配置问题

问题核心是全局回退规则会捕获React页面的刷新请求，导致跳转到Blazor。以下是调整后的完整配置方案：

修改后的Program.cs代码 #

using Microsoft.Extensions.FileProviders;

var builder = WebApplication.CreateBuilder(args);

// 添加Razor Pages服务
builder.Services.AddRazorPages();

var app = builder.Build();

// 配置HTTP请求管道
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}
else
{
    app.UseWebAssemblyDebugging();
}

app.UseHttpsRedirection();

// 启用Blazor框架文件支持
app.UseBlazorFrameworkFiles();

// 静态文件：默认访问wwwroot目录
app.UseStaticFiles();

// 配置React构建文件的静态访问：/app路径映射到React的build目录
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), @"Pages\React\Build")),
    RequestPath = "/app",
    // 允许访问React路由相关的未知类型文件
    ServeUnknownFileTypes = true
});

app.UseRouting();

app.UseAuthorization();

// 映射Razor Pages页面
app.MapRazorPages();

// 为Blazor路径设置专属回退：/blazor开头的请求回退到Blazor的入口页
app.MapWhen(context => context.Request.Path.StartsWithSegments("/blazor"), blazorApp =>
{
    blazorApp.UseRouting();
    blazorApp.UseEndpoints(endpoints =>
    {
        endpoints.MapFallbackToFile("/blazor/index.html");
    });
});

// 为React路径设置专属回退：/app开头的请求回退到React的入口页
app.MapWhen(context => context.Request.Path.StartsWithSegments("/app"), reactApp =>
{
    reactApp.UseRouting();
    reactApp.UseEndpoints(endpoints =>
    {
        endpoints.MapFallbackToFile("/app/index.html");
    });
});

// 全局默认回退（可选，根据站点默认首页需求调整）
app.MapFallbackToFile("index.html");

app.Run();

关键配置说明 #

1. 中间件顺序调整
   把UseHttpsRedirection、UseStaticFiles等核心中间件前置，确保静态资源优先被处理，避免路由规则拦截正常资源请求。

2. React静态文件优化

   • 移除单独的/static路径配置，React构建后的静态资源会自动通过/app/static访问，无需额外映射。
   • 添加ServeUnknownFileTypes = true，解决React单页应用路由文件被识别为未知类型的问题。

3. 路径专属回退规则
   通过MapWhen为/blazor和/app分别设置独立的回退逻辑，刷新这两个路径下的任意子路由时，会各自指向对应的应用入口页，不会互相干扰。

4. Blazor页面补充配置
   确保Pages/Blazor/index.cshtml的基础路径设置正确：

   @page "/blazor"
   @{
       Layout = null;
   }
   <!DOCTYPE html>
   <html>
   <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Blazor App</title>
       <base href="/blazor/" />
       <link href="css/app.css" rel="stylesheet" />
       <link href="[你的Blazor项目名称].styles.css" rel="stylesheet" />
   </head>
   <body>
       <div id="app">Loading...</div>
       <script src="_framework/blazor.webassembly.js"></script>
   </body>
   </html>
   

   其中<base href="/blazor/" />是确保Blazor资源路径正确的关键。

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