将Blazor WASM集成到含React的.NET 8 Web应用遇404错误求助

1. 配置Blazor静态文件的子路径映射 #

修改Startup.cs中的UseBlazorFrameworkFiles调用，指定Blazor应用的根路径为/bapp，让ASP.NET Core在该路径下识别Blazor的静态资源：

// 替换原有的app.UseBlazorFrameworkFiles();
app.UseBlazorFrameworkFiles("/bapp");

2. 调整端点路由，匹配Blazor子路径请求 #

在UseEndpoints中添加针对/bapp路径的回退规则，确保该路径下的所有请求都指向你的Blazor入口页面：

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
    endpoints.MapRazorPages();
    // 添加Blazor子路径的回退路由，指向bapp目录下的Index页面
    endpoints.MapFallbackToPage("/bapp/{*path}", "/bapp/Index");
});

3. 设置Blazor页面的Base Href #

在/Pages/bapp/Index.cshtml（你的Blazor入口Razor页面）中添加<base>标签，指定Blazor应用的根路径，避免从网站根目录请求_framework资源：

@page
@using Codwellers.Prsto.Blazor.Client.Pages

@{
    Layout = "_Layout";
}

@* 新增Base标签，指定Blazor根路径 *@
<base href="/bapp/" />

this is the index
<component type="typeof(Counter)" render-mode="WebAssemblyPrerendered" />

4. 确保Blazor WASM项目输出被正确部署 #

• 右键Blazor WASM项目 → 属性 → 生成 → 输出路径，设置为../你的主Web项目名/wwwroot/bapp（相对路径，让主项目能获取Blazor编译后的资源）
• 或者在主Web项目的.csproj中添加以下配置，自动复制Blazor项目的输出：

<ItemGroup>
  <ProjectReference Include="..\你的Blazor项目名\你的Blazor项目名.csproj">
    <OutputItemType>Content</OutputItemType>
    <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
  </ProjectReference>
</ItemGroup>

5. 确认中间件顺序 #

确保UseBlazorFrameworkFiles和UseEndpoints的调用顺序在UseSpa之前（你的现有代码顺序已符合要求，无需调整），避免Spa中间件拦截Blazor的请求。

完成以上配置后重新编译运行，访问localhost:44300/bapp时，Blazor会从/bapp/_framework路径加载所需资源，即可解决404问题。

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