Blazor调用NavigateTo跳转时如何避免NavigationMenu组件重渲染

解决方案 #

1. 持久化导航状态（首选方案） #

你当前修改的按钮激活样式存储在自定义NavManager的MainNavButtons属性中，导航跳转时组件重载会重置本地实例的状态，将NavManager注册为全局服务即可保留状态：

• Blazor WebAssembly 项目在Program.cs中添加：

builder.Services.AddSingleton<NavManager>();

• Blazor Server 项目在Program.cs中添加：

builder.Services.AddScoped<NavManager>();

之后在NavigationMenu.razor中注入服务，不要在组件内部实例化NavManager：

@inject NavManager NavManager

此时就算组件触发重渲染，读取的也是同一个服务实例的状态，激活样式和下拉状态不会丢失。

2. 手动控制组件渲染 #

如果确实不需要导航时刷新导航组件，可以重写ShouldRender方法直接禁用自动渲染：

protected override bool ShouldRender()
{
    // 仅首次渲染生效，后续所有自动渲染请求全部跳过
    return false;
}

如果后续有需要手动更新组件的场景，显式调用StateHasChanged()即可触发渲染。

3. 路由绑定方案（更稳定的长期方案） #

完全抛弃点击事件修改临时状态的逻辑，直接将激活状态与当前路由绑定，无论组件是否重载，状态都能自动匹配：
首先在组件中添加路由监听与状态判断逻辑：

@inject NavigationManager NavMgr

protected override void OnInitialized()
{
    // 路由变化时仅触发一次重渲染，自动更新激活状态
    NavMgr.LocationChanged += (sender, args) => StateHasChanged();
}

private bool IsRouteActive(string route)
{
    return NavMgr.Uri.TrimEnd('/').EndsWith(route.TrimStart('/'), StringComparison.OrdinalIgnoreCase);
}

然后修改 Razor 模板的样式绑定逻辑：

<button class="@(IsRouteActive(button.ButtonRoute) ? ButtonActiveStyle.active : ButtonActiveStyle.normal)" 
        @onclick="@(() => NavMgr.NavigateTo(button.ButtonRoute))">
    @button.ButtonString
</button>

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