Razor页面无法通过下拉菜单导航问题求助

问题分析 #

1. NavMenu组件结构错误：包含了完整的<html>、<body>标签，Blazor组件作为页面片段，不能包含这些根元素，会导致DOM结构异常，干扰事件处理逻辑。
2. Bootstrap下拉事件冲突：原生Bootstrap的下拉菜单会监听.dropdown-item的点击事件来关闭菜单，事件冒泡会优先触发菜单关闭，导致Blazor的NavLink导航逻辑未执行。
3. NavLink结构不符合规范：将.dropdown-item类加在了<li>标签上，而非NavLink本身，导致样式和事件绑定异常。

解决方案 #

1. 修正NavMenu组件的DOM结构 #

移除多余的根标签，只保留导航相关代码，同时统一使用NavLink并添加事件阻止冒泡：

@page "/navmenu"
@inject NavigationManager NavigationManager
@using Microsoft.AspNetCore.Components

<nav class="navbar navbar-expand-lg navbar-dark bg-danger">
    <div class="container">
        <NavLink class="navbar-brand" href="/">
            <div class="logo-container">
                <img src="cropped-RTT-GROUP-RISK-300x75.png" alt="Logo" width="370" height="75">
            </div>
        </NavLink>
        <div class="btn-group">
            <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                Menu
            </button>
            <ul class="dropdown-menu">
                <li><NavLink class="dropdown-item" href="/">Home</NavLink></li>
                <li><NavLink class="dropdown-item" href="/about">About</NavLink></li>
                <li>
                    <NavLink class="dropdown-item" href="/accidentreportspage" @onclick:stopPropagation="true">
                        <span class="oi oi-list-rich" aria-hidden="true"></span> Accident Reports
                    </NavLink>
                </li>
                <li><NavLink class="dropdown-item" href="/contact">Contact</NavLink></li>
            </ul>
        </div>
    </div>
</nav>

@code {
    // 无需额外导航方法，NavLink已内置导航逻辑
}

2. 关键修改说明 #

• 移除根标签：删除<html>、<body>等完整文档结构，Blazor组件仅需保留局部DOM片段。
• 统一使用NavLink：替换所有<a>标签为NavLink，保持SPA导航的无刷新特性，避免页面跳转异常。
• 阻止事件冒泡：在Accident Reports的NavLink上添加@onclick:stopPropagation="true"，阻止点击事件传递到Bootstrap的下拉关闭逻辑，确保导航优先执行。
• 修正样式类：将.dropdown-item直接应用到NavLink上，符合Bootstrap下拉菜单项的样式规范。

3. 额外检查项 #

• 确认AccidentReportsPage的路由@page "/accidentreportspage"拼写无误，无大小写或路径错误。
• 若使用Bootstrap JS驱动下拉菜单，需确保主Layout中正确引入Bootstrap JS文件；也可改用Blazor专用Bootstrap组件库（如Blazor Bootstrap），彻底避免JS与Blazor的事件冲突。

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