如何用Blazor NavLink组件渲染aria-current属性？

原生NavLink的局限 #

原生NavLink组件仅会在链接匹配当前页面时自动添加active类，没有内置支持配置aria-current="page"属性的直接扩展点，这也是你查看文档和源码后找不到相关设置的原因。

自定义包装组件实现 #

通过继承NavLink并包装其渲染逻辑，可以轻松实现激活时添加aria-current="page"的需求，同时完全复用原生组件的路由匹配能力：

自定义组件代码 #

创建NavLinkWithAria.razor文件：

@inherits NavLink

<a @attributes="AdditionalAttributes"
   class="@CssClass"
   aria-current="@(IsActive ? "page" : null)">
    @ChildContent
</a>

@code {
    // 无需额外定义参数，自动继承NavLink的所有公开参数（如Match、href等）
}

使用方式 #

和原生NavLink完全一致，只需替换标签名即可：

<NavLinkWithAria href="/dashboard" Match="NavLinkMatch.All">
    仪表盘
</NavLinkWithAria>

当链接处于激活状态时，组件会自动渲染出aria-current="page"属性，同时保留原生的active类。

补充说明 #

这种方案的优势在于：

• 完全复用NavLink的路由匹配逻辑，不需要自己实现URL对比逻辑
• 保留原生组件的所有参数和特性，学习成本为零
• 代码简洁，仅需重写渲染模板即可

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