.NET 8 Blazor Web App：如何将不存在的URL映射到<NotFound>元素

当点击指向不存在URL的NavLink时，页面刷新并显示浏览器默认404，核心原因是服务器未配置路由回退规则，导致未匹配的请求直接返回404，没有交给Blazor客户端路由处理。

解决步骤 #

1. 配置服务器端Fallback路由

在服务器项目的Program.cs中添加MapFallbackToFile配置，让所有未匹配到具体路由的请求都返回Blazor入口页面index.html，交由客户端Router接管路由判断：

修改后的服务器端Program.cs代码：

builder.Services.AddRazorComponents()
     .AddInteractiveWebAssemblyComponents();

// 保留你的其他中间件配置（如静态文件、API路由等）

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

// 添加这行，让未匹配的请求返回index.html
app.MapFallbackToFile("index.html");

2. 确认客户端Router配置正确

确保Router组件的<NotFound>模板已正确配置（你示例中的写法符合要求）：

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
       <RouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.MainLayout)" />
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>

    <NotFound>
        <div>Not found</div>
    </NotFound>
</Router>

3. 继续使用NavLink组件

保持使用NavLink而非原生<a>标签，它会触发客户端导航，不会向服务器发起新请求（你示例中的写法正确）：

<div class="nav-item px-3">
    <NavLink class="nav-link px-3" href="not-found">
        <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Not Found
    </NavLink>
</div>

原理说明 #

配置MapFallbackToFile后，服务器会将所有未匹配到API、静态文件的请求返回index.html。Blazor应用加载后，客户端Router会解析当前URL：

• 若路由存在，渲染对应页面；
• 若路由不存在，直接显示<NotFound>模板内容，全程无页面刷新，也不会触发浏览器默认404。

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