Blazor WASM多路由Razor页导航路径错误、页面重载异常问题

• 不带前导/的导航路径属于相对路径，NavigationManager会基于当前页面的URL层级做路径拼接。当前页面URL为/profile/exchange/5时，传入相对路径exchange，会直接在当前路径的目录层级下拼接，最终生成错误路径/profile/exchange/exchange。
• 加前导/后触发全页重载，本质是相关导航逻辑没有正确走Blazor客户端路由：一是调用NavigateTo时未显式关闭强制加载参数，二是普通<a>标签默认触发浏览器原生导航行为，没有被Blazor路由系统拦截。

1. 修正返回按钮的导航逻辑 #

所有根路径导航必须加前导/标记为应用根路径下的地址，同时显式传入forceLoad: false参数，明确要求走客户端路由，不触发服务器重载。修改后的代码如下：

protected void NavigateToOverviewUserAndExchange()
{
    if (UserId != 0)
    {
        NavigationManager.NavigateTo("/usermanager", forceLoad: false);
        return;
    }
    else if (ExchangeId != 0)
    {
        NavigationManager.NavigateTo("/exchange", forceLoad: false);
        return;
    }
}

注意：如果你的Blazor应用部署在站点子目录下（而非域名根路径），不要硬编码前导斜杠，可通过NavigationManager.ToAbsoluteUri("usermanager").AbsolutePath生成适配部署路径的正确导航地址，避免子路径部署时出现404。

2. 修复菜单链接的全页重载问题 #

原生<a>标签的点击事件默认会触发浏览器的页面跳转逻辑，不会走Blazor客户端路由，可选择以下任意一种方式修改：

• 优先使用Blazor内置的NavLink组件替换普通a标签，组件会自动拦截点击事件走客户端路由，还支持自动给当前激活的菜单添加样式：

<NavLink href="/usermanager">
    <i class="bi bi-circle"></i><span>Users</span>
</NavLink>

• 如果必须保留普通a标签，可添加@onclick:preventDefault阻止浏览器默认跳转行为，同时绑定点击事件调用NavigationManager做客户端导航：

<a href="/usermanager" 
   @onclick="() => NavigationManager.NavigateTo("/usermanager", forceLoad: false)" 
   @onclick:preventDefault>
    <i class="bi bi-circle"></i><span>Users</span>
</a>

3. 配置排查（改完上述代码仍有重载问题时检查） #

• 检查App.razor中的Router组件配置，确认AppAssembly正确指向当前项目的程序集，保证路由系统能扫描到所有声明了@page的组件：

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

• 检查wwwroot/index.html中的base标签配置，必须和应用的实际部署根路径一致。本地调试默认配置为<base href="/" />，如果部署在站点子路径下，需要修改为对应的子路径前缀，否则路由匹配会出现异常。

内容的提问来源于stack exchange，提问作者hamid reza shahshahani