Blazor中如何修改NavLink的默认Active类为自定义类？

直接给NavLink组件传递ActiveClass参数 #

你之前的问题出在仅在页面@code区域定义了ActiveClass属性，但未将其传递给NavLink组件本身。正确的用法是直接在NavLink标签上指定该参数：

<NavLink href="/your-target-page" ActiveClass="test">目标页面</NavLink>

当路由匹配/your-target-page时，组件会自动应用test类，替代默认的active类（注意Blazor默认激活类为小写的active，并非你提到的Active）。

全局统一设置默认激活类 #

如果希望所有NavLink都使用自定义激活类，无需逐个设置，可以在Program.cs中配置导航选项：

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents() // 根据项目类型调整，比如AddInteractiveWebAssemblyComponents
    .AddNavigationManager(options =>
    {
        options.ActiveNavLinkClass = "test";
    });

配置完成后，所有未显式指定ActiveClass的NavLink都会默认使用test作为激活类。

为什么之前的代码无效 #

你在@code里定义的public string? ActiveClass { get; set; } = "test";是页面自身的属性，和NavLink组件的输入参数无关。NavLink的ActiveClass是组件的内置参数，必须通过组件标签传递值才能生效。

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