如何解决Blazor中NavLink动态CSS规则不生效的问题？

你的问题根源在于手动管理NavLink激活状态的逻辑，和Blazor NavLink组件的内置匹配规则冲突，再加上根路径/的默认前缀匹配特性，导致Home链接始终被标记为激活状态。

问题原因拆解 #

Blazor的NavLink组件本身会自动根据当前URL判断是否添加active类，默认匹配模式是NavLinkMatch.Prefix——这意味着所有以/开头的URL（也就是你的所有页面）都会匹配Home的href="/"，所以即使你通过home变量把class设为nav-link，组件自身仍会额外添加active类，最终导致Home链接始终显示加粗样式。

修复步骤 #

1. 移除冗余的手动判断代码：删除C#中的home、blog变量，以及OnAfterRenderAsync里的URL判断逻辑，这些功能NavLink组件已经内置实现，不需要手动重复开发。
2. 给Home的NavLink设置精确匹配：为Home的NavLink添加Match="NavLinkMatch.All"属性，让它只有在URL完全等于/时才标记为激活。

修改后的HTML代码：

<li class="nav-item">
    <NavLink class="nav-link" 
             aria-current="page" 
             href="/"
             Match="NavLinkMatch.All">Home</NavLink>
</li>
<li class="nav-item">
    <NavLink class="nav-link" 
             aria-current="page" 
             href="/blog">Blog</NavLink>
</li>

额外优化提示 #

如果后续需要手动处理路径判断，不要硬编码完整URL（比如http://abc.xzy/），应该使用NavigationManager.Path获取相对路径，避免部署环境变化导致判断失效：

// 正确的相对路径判断方式
if (MyNavigationManager.Path.Equals("/"))
{
    // 首页逻辑
}
else if (MyNavigationManager.Path.StartsWith("/blog"))
{
    // Blog页面逻辑
}

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