Blazor @layout标签页面渲染异常：指定自定义布局前闪现默认布局如何解决

问题根因 #

该问题通常是由于全局默认布局的嵌套配置错误、预渲染阶段路由匹配延迟、或者入口页硬编码了默认布局内容导致的，可按以下步骤逐一排查修复：

1. 修正App.razor的布局嵌套逻辑 #

绝大多数场景下的闪烁都是因为错误地将默认布局直接套在了<Router>组件外层，导致所有页面初始化时都会先加载默认布局，之后才会替换为页面指定的自定义布局。
将App.razor的写法调整为仅在<RouteView>/<AuthorizeRouteView>中指定默认布局即可：

<!-- 正确写法 -->
<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <!-- 仅在此处指定全局默认布局，RouteView会优先使用页面上@layout声明的布局 -->
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <PageTitle>未找到页面</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">抱歉，您访问的页面不存在。</p>
        </LayoutView>
    </NotFound>
</Router>

禁止将任何布局组件直接嵌套在<Router>组件的外层。

2. 清理入口页的硬编码布局内容 #

检查wwwroot/index.html(WebAssembly) 或Pages/_Layout.cshtml(Server) 中的挂载节点，节点内仅保留纯加载提示内容，不要写入导航栏、页脚等默认布局的静态内容：

<!-- 正确写法 -->
<div id="app">
    <!-- 仅放加载状态，不要加默认布局的静态元素 -->
    <div class="loading-spinner">加载中...</div>
</div>

3. 预渲染场景的适配 #

如果开启了页面预渲染：

• 确保自定义布局声明@layout LoginLayout写在登录页面代码的第一行，不要放在其他指令或代码之后
• 如果全局_Imports.razor中声明了默认布局，可在登录页所在的目录下单独新建_Imports.razor，仅声明该目录下页面使用的自定义布局，避免全局布局覆盖

4. 授权跳转场景的适配 #

如果是未授权用户跳转到登录页时出现的闪烁，使用<AuthorizeRouteView>替代普通的<RouteView>，未授权状态下会直接渲染跳转逻辑，不会加载默认布局内容：

<AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
    <NotAuthorized>
        <RedirectToLogin />
    </NotAuthorized>
</AuthorizeRouteView>

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