Blazor 8 Server中@onclick不触发函数及路由渲染模式报错问题

我编写了如下Blazor侧边栏组件，点击Logout按钮时，LogoutUser异步方法完全不触发。尝试给组件添加@rendermode InteractiveServer后，问题依旧。

当在App.razor中设置<Routes @rendermode="InteractiveServer" />以全局启用交互式服务器渲染时，出现以下错误：

InvalidOperationException: There is already a subscriber to the content with the given section ID 'System.Object'.

Microsoft.AspNetCore.Components.Sections.SectionRegistry.Subscribe(object identifier, SectionOutlet subscriber)

组件代码 #

@using Models
@using Microsoft.AspNetCore.Identity
@inject SignInManager<AccountUser> SignInManager
@inject NavigationManager Navigation
@rendermode InteractiveServer


<div class="d-flex flex-column flex-shrink-0 p-3 bg-light " style="width: 260px;overflow: auto;">
    <a href="/" class="text-decoration-none">
        <div><img src="images/logo.png" style="width:200px;" /></div>
    </a>
    <hr />

    <button class="btn btn-link align-items-center link-dark text-decoration-none" @onclick="LogoutUser" style="padding: 0; border: none; background: none;">
        <i class="bi bi-door-closed"></i> &nbsp;Logout
    </button>
</div>

@code {
    private async Task LogoutUser()
    {
        await SignInManager.SignOutAsync();
        Navigation.NavigateTo("/login", true);
    }
}

解决方案建议 #

针对Logout按钮不触发的问题 #

• 检查父组件/页面的渲染模式：若父组件是静态渲染（默认），子组件单独声明InteractiveServer可能无法建立SignalR连接，导致交互事件失效。可将父组件或对应路由页面也设置为InteractiveServer渲染模式。
• 排查按钮样式影响：当前按钮自定义了padding:0; border:none; background:none，可能导致实际点击区域异常。暂时移除这些样式，测试按钮是否能正常触发事件，再逐步调整样式。
• 验证服务注入有效性：在OnInitializedAsync方法中添加日志输出，确认SignInManager和Navigation是否成功注入，避免依赖注入失败导致方法无法执行。

针对全局Routes渲染模式报错的问题 #

• 排查重复的SectionOutlet：错误提示存在重复订阅同一Section ID的情况，检查App.razor、布局组件或第三方组件库中是否有重复声明的SectionOutlet。
• 避免全局设置渲染模式：取消App.razor中<Routes @rendermode="InteractiveServer" />的全局设置，改为在单个页面或组件上单独声明@rendermode InteractiveServer，逐步排查冲突来源。
• 清理项目缓存：删除项目的bin和obj目录，重新构建解决方案，排除编译缓存导致的异常。

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