如何为Visual Studio的Blazor Web App实现404错误处理及修复异常？

针对你遇到的问题，以下是适配Blazor WebAssembly全局交互模式的404页面实现步骤，同时解决你之前用UseStatusCodePagesWithReExecute出现的失效问题：

一、客户端配置路由未匹配处理 #

1. 创建NotFound页面组件
   在客户端项目中新建NotFound.razor文件，内容如下：

@page "/notfound"
@layout MainLayout

<h1>404 - 页面未找到</h1>
<p>抱歉，你访问的页面不存在，请检查网址是否正确。</p>

2. 修改App.razor接管未匹配路由
   打开App.razor，在Router组件中添加NotFound区块，指定未匹配路由时渲染的内容：

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <NotFound /> <!-- 引用上面创建的NotFound组件 -->
        </LayoutView>
    </NotFound>
</Router>

二、服务端配置状态码处理（解决直接访问不存在路由的情况） #

修改服务端Program.cs中的中间件顺序和配置，确保直接访问不存在的路由时，既返回404状态码，又引导客户端渲染自定义404页面：

var builder = WebApplication.CreateBuilder(args);

// 添加服务
builder.Services.AddRazorComponents()
    .AddInteractiveWebAssemblyComponents();

var app = builder.Build();

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

app.UseHttpsRedirection();
app.UseStaticFiles();

// 自定义状态码处理：针对404重定向到客户端notfound页面，保留404状态码
app.UseStatusCodePages(context =>
{
    var response = context.HttpContext.Response;
    if (response.StatusCode == StatusCodes.Status404NotFound)
    {
        response.Redirect("/notfound");
        // 必须保留404状态码，避免搜索引擎误判
        response.StatusCode = StatusCodes.Status404NotFound;
    }
    return Task.CompletedTask;
});

app.MapRazorComponents<App>()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(Client._Imports).Assembly);

app.Run();

三、你之前方案失效的原因 #

你使用UseStatusCodePagesWithReExecute("/StatusCode/{0}")时，服务端会尝试重新执行/StatusCode/404的请求，但Blazor WebAssembly的服务端路由并不存在这个页面，后续客户端接管路由后，可能和服务端返回的默认404响应冲突，导致页面被替换为空白的“Not found”。而上述方案中，服务端直接重定向到客户端已定义的/notfound路由，同时保留404状态码，既符合单页应用的路由逻辑，又能正确展示自定义页面。

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