Blazor登录后布局错乱问题求助（附相关代码）

我按照《Custom Blazor Authentication》博客实现了自定义Blazor身份验证，所有功能均正常，但登录后页面布局出现错乱（截图：）。作为Blazor新手，初期不知排查方向，现附上MainLayout.razor、App.razor及新增的AuthLayout.razor代码，怀疑布局问题与AuthLayout有关，恳请帮忙排查。

常见排查方向及代码检查要点 #

1. 布局嵌套重复问题 #

检查AuthLayout.razor是否错误嵌套了MainLayout，或App.razor路由配置导致布局重复应用：

• 若AuthLayout中存在@layout MainLayout指令，同时App.razor的AuthorizeRouteView又指定了MainLayout，会导致双重布局容器，引发样式错乱。
• 查看App.razor的RouteView/AuthorizeRouteView配置，避免并行应用多个布局。正确的授权布局配置应通过AuthorizeRouteView统一管理，示例：

  <CascadingAuthenticationState>
      <Router AppAssembly="@typeof(App).Assembly">
          <Found Context="routeData">
              <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(AuthLayout)">
                  <NotAuthorized>
                      <RedirectToLogin />
                  </NotAuthorized>
              </AuthorizeRouteView>
          </Found>
          <NotFound>
              <LayoutView Layout="@typeof(MainLayout)">
                  <p>页面未找到</p>
              </LayoutView>
          </NotFound>
      </Router>
  </CascadingAuthenticationState>
  

2. CSS样式冲突 #

• 检查AuthLayout.razor中的HTML结构和CSS类，是否覆盖了MainLayout的核心布局样式（如容器宽高、边距、flex布局属性等）。例如AuthLayout中若添加了额外的container类，可能会和MainLayout的容器样式叠加导致错乱。
• 确认AuthLayout的布局容器是否与MainLayout的侧边栏、主内容区样式产生冲突，比如强制设置height: 100%或margin: auto等属性。

3. @Body标记位置错误 #

检查AuthLayout.razor中@Body的放置：

• 若@Body被多余的HTML容器（如额外的<div>）包裹，会增加页面层级，破坏MainLayout原有的布局结构。确保@Body仅放在布局的目标内容区域，无冗余嵌套。

4. 布局继承逻辑错误 #

确认AuthLayout是否正确继承LayoutComponentBase，且未错误重写布局相关的生命周期方法，导致布局渲染异常。

请补充粘贴MainLayout.razor、App.razor和AuthLayout.razor的完整代码，以便更精准定位问题。

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