Blazor应用中Bootstrap Navbar Dropdown点击跳转根路径如何解决？

问题根因 #

你的问题由两个原因共同导致：

1. 下拉菜单的触发按钮使用了href="#"的<a>标签，Blazor客户端路由会默认拦截该跳转请求，将#识别为根路径的锚点跳转，首次点击时Bootstrap下拉组件的事件还没来得及阻止默认行为，就触发了Blazor的路由跳转。
2. 首次加载带参数的/reader页面时，Bootstrap Dropdown组件的初始化时机晚于点击事件绑定，返回页面后组件未重新渲染，初始化已完成，所以后续点击正常。

解决方案（按优先级选择） #

方案1：将下拉触发器改为标签（最推荐）

Bootstrap Dropdown原生支持作为触发器，不需要href属性，从根源避免跳转问题，同时添加btn btn-link类保持原有导航链接样式：

<li class="nav-item dropdown">
    <!-- 把原来的a标签替换为以下button -->
    <button class="nav-link btn btn-link p-0 border-0" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="2em" height="2em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M16.59 5.59L18 7l-6 6l-6-6l1.41-1.41L12 10.17l4.59-4.58m0 6L18 13l-6 6l-6-6l1.41-1.41L12 16.17l4.59-4.58z" fill="currentColor" /></svg>
    </button>
    <!-- 下拉菜单部分代码不变 -->
</li>

方案2：保留标签，添加默认行为阻止

如果必须使用<a>标签，给标签添加Blazor内置的@onclick:preventDefault属性，直接阻止点击时的默认跳转行为：

<a class="nav-link" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" @onclick:preventDefault>
    <!-- SVG代码不变 -->
</a>

补充注意

如果下拉菜单中的选项也用了href="#"的空链接，也需要按照上面的逻辑做对应修改，避免跳转问题。

---

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