.NET 8中同一RCL内Razor组件路由跳转失败原因排查

核心原因 #

1. NavLink未被识别为Blazor组件
   你的RCL组件ScheduleView.razor中使用的<NavLink>没有引用对应的命名空间，导致浏览器将其解析为普通HTML <a>标签，触发硬导航（浏览器直接向服务器发起HTTP请求），而非Blazor的客户端路由导航。

2. RCL页面组件缺少渲染模式配置
   在.NET 8的Blazor Web Server交互式渲染模式下，所有可路由的组件需要明确渲染模式。你的RCL中的ScheduleView和CodeView未指定渲染模式，且主项目路由配置未设置默认交互式渲染模式，导致服务器无法正确处理硬导航请求，返回404。

解决方案 #

步骤1：修复RCL中的NavLink组件

在ScheduleView.razor顶部添加命名空间引用，确保<NavLink>是Blazor的路由组件：

@page "/scheduleview"
@using Microsoft.AspNetCore.Components.Routing <!-- 添加这一行 -->

<ul class="nav nav-tabs">
    <li class="nav-item">
        <NavLink class="nav-link" activeClass="active" href="/codeview">PageWithForwardSlash</NavLink>
    </li>
    <li class="nav-item">
        <NavLink class="nav-link" activeClass="active" href="codeview">Logic</NavLink>
    </li>
</ul>

步骤2：设置默认交互式服务器渲染模式

修改主项目的路由配置代码，添加默认渲染模式，确保RCL中的页面组件使用交互式服务器渲染：

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddAdditionalAssemblies(new[] { typeof(LuahSV.ScheduleView).Assembly })
    .AddDefaultInteractiveServerRenderMode(); // 添加这一行

可选：为RCL页面组件单独指定渲染模式

如果不想设置全局默认模式，可以在RCL的每个页面组件顶部添加渲染模式指令：

@page "/scheduleview"
@rendermode InteractiveServer <!-- 添加这一行 -->
@using Microsoft.AspNetCore.Components.Routing

<!-- 组件内容 -->

@page "/codeview"
@rendermode InteractiveServer <!-- 添加这一行 -->

<h3>CodeView</h3>

@code {
}

这样处理后，点击NavLink会触发Blazor的客户端导航，服务器也能正确识别RCL页面组件的渲染模式，解决404问题。

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