如何配置Blazor Web App导航以处理404页面？

当Blazor Server迁移到Blazor Web App后，默认访问不存在的URL会显示空白页，要恢复旧版的"未找到"页面体验，可按以下步骤配置：

1. 配置客户端路由的NotFound提示 #

打开Components/Routes.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)">
            <div class="container mt-4">
                <h1 class="display-4">404 - 页面未找到</h1>
                <hr />
                <p>您访问的页面不存在，请检查URL是否正确，或返回<a href="/">首页</a>。</p>
            </div>
        </LayoutView>
    </NotFound>
</Router>

这一步会处理Blazor内部导航到不存在路由的情况，显示带主布局的404提示。

2. 处理服务器端直接访问无效URL的场景 #

如果用户直接在浏览器输入不存在的URL，需要配置服务器端返回404状态码并加载Blazor的404页面：

步骤2.1 创建Error页面 #

在Pages文件夹下创建两个文件：

Error.cshtml：

@page "/error"
@model ErrorModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>页面未找到</title>
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
</head>
<body>
    <component type="typeof(App)" render-mode="InteractiveServer" />
    <script src="_framework/blazor.server.js"></script>
</body>
</html>

Error.cshtml.cs：

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace YourProjectNamespace.Pages;

[ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
public class ErrorModel : PageModel
{
    public void OnGet()
    {
        // 设置HTTP 404状态码
        Response.StatusCode = 404;
    }
}

注意替换YourProjectNamespace为你实际的项目命名空间。

步骤2.2 配置服务器路由Fallback #

打开Program.cs，在Blazor路由配置后添加fallback规则：

var builder = WebApplication.CreateBuilder(args);

// 注册服务
builder.Services.AddRazorComponents()
    .AddInteractiveServerRenderMode();

var app = builder.Build();

// 中间件配置
app.UseStaticFiles();
app.UseRouting();

// 映射Blazor组件
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

// 添加Fallback路由，将未匹配的请求导向Error页面
app.MapFallbackToPage("/error");

app.Run();

效果验证 #

完成配置后，无论是在Blazor内部导航到不存在的路由，还是直接访问无效URL，都会显示带主布局的404页面，和旧版Blazor Server的体验一致。

内容的提问来源于stack exchange，提问作者Mike-E