Blazor配置NotFound页如何避免访问无效地址时布局闪烁

当前写法下，NotFound分支单独在内部用LayoutView挂载了MainLayout，而Blazor的Router组件会给Found、NotFound两个分支分别维护独立的渲染实例：

• 当用户从有效页面点击无效链接跳转时，Blazor会先卸载有效页面对应分支下的MainLayout实例
• 等NotFound的内容解析完成后，才会在NotFound分支下重新创建一个全新的MainLayout实例
• 两个布局实例切换的间隙，整个布局（包括侧边菜单）会临时从DOM中移除，就出现了布局短暂消失的现象

核心调整思路：把MainLayout的挂载层级提到Router组件外层，让布局本身完全不参与路由切换的挂载卸载流程。

调整后的App.razor代码 #

<!-- 最外层直接挂载全局布局，不交给Router分支管理 -->
<LayoutView Layout="@typeof(MainLayout)">
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <!-- 移除RouteView上的DefaultLayout配置，避免出现双层布局嵌套 -->
            <RouteView RouteData="@routeData" />
        </Found>
        <NotFound>
            <p>There is nothing at this address.</p>
            <img src="/images/broken_wine_glass.jpg" />
        </NotFound>
    </Router>
</LayoutView>

方案实际效果 #

• MainLayout是应用完成路由初始化前就挂载的常驻DOM元素，不管路由匹配到有效页面还是进入NotFound分支，都不会被卸载
• 路由切换时只会动态替换MainLayout内部MainContent插槽的内容，侧边菜单、页脚等布局元素会全程保持显示，从根源上避免布局闪断消失的问题

可选补充优化 #

• 如果项目存在异步路由加载逻辑，可以在路由切换过程中加轻量的加载占位提示，进一步降低内容替换时的视觉跳变感。

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