.NET 8 Blazor NavLink外部URL样式不一致，如何维持统一？

Blazor 的 NavLink 组件对内部路由链接会自动管理激活状态（添加active类），但当使用外部 URL 时，组件会渲染为普通 <a> 标签，若项目 CSS 或浏览器默认样式对外部链接有差异化处理，就会导致样式不一致。以下是几种解决方法：

方法一：直接使用普通 <a> 标签替换外部链接的 NavLink #

将外部链接的 NavLink 替换为普通 <a> 标签，保持与内部链接相同的 class 属性，样式会自动对齐：

<div class="nav-item px-3">
    <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
        <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
    </NavLink>
</div>
<div class="nav-item px-3">
    <!-- 替换为普通a标签，class与内部链接一致 -->
    <a class="nav-link" href="https://www.google.com/" target="_blank">
        <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Google
    </a>
</div>

若需要在新窗口打开外部链接，添加 target="_blank" 属性即可。

方法二：通过 CSS 强制统一外部链接样式 #

在全局 CSS 文件（如 wwwroot/css/site.css）中添加样式规则，覆盖外部链接的默认样式，使其与内部 nav-link 保持一致：

/* 统一外部链接的基础样式 */
.nav-link[href^="http"] {
    color: var(--bs-nav-link-color);
    text-decoration: none;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
}

/* 统一 hover/focus 状态样式 */
.nav-link[href^="http"]:hover,
.nav-link[href^="http"]:focus {
    color: var(--bs-nav-link-hover-color);
    text-decoration: none;
    background-color: var(--bs-nav-link-hover-bg);
}

上述样式基于 Bootstrap 变量，若项目使用自定义 CSS，替换为对应颜色、边距值即可。

方法三：自定义 NavLink 组件处理外部链接 #

创建一个继承自 NavLink 的自定义组件，自动处理外部链接的样式逻辑：

1. 在项目中创建 CustomNavLink.razor 文件：

@inherits NavLink

@{
    // 判断是否为外部链接
    bool isExternal = !string.IsNullOrEmpty(Href) && 
                      (Href.StartsWith("http://") || Href.StartsWith("https://"));
    // 外部链接直接使用基础nav-link类，内部链接保留原NavLink的类逻辑
    string linkClass = isExternal ? "nav-link" : NavLinkClass;
}

<a href="@Href" class="@linkClass" @attributes="AdditionalAttributes">
    @ChildContent
</a>

2. 使用自定义组件替换原 NavLink：

<div class="nav-item px-3">
    <CustomNavLink class="nav-link" href="" Match="NavLinkMatch.All">
        <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
    </CustomNavLink>
</div>
<div class="nav-item px-3">
    <CustomNavLink class="nav-link" href="https://www.google.com/">
        <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Google
    </CustomNavLink>
</div>

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