Blazor中创建并应用基于_Imports.razor指令的新布局，解决身份验证组件分离后无限循环问题

我完全理解你现在的困扰——好不容易把登录、注册这些身份验证组件从带导航菜单的MainLayout里抽离出来，结果陷入了无限循环的死胡同，肯定折腾了好一阵吧。咱们先把问题拆解清楚，再一步步解决。

先梳理下你的操作背景 #

你先是用.NET CLI的身份验证脚手架命令生成了Blazor Identity组件：

dotnet aspnet-codegenerator blazor-identity -dbProvider sqlite -dc MyProject.Data.BlazorAuthContext -f

生成的组件默认放在Components/Account目录下，自带了AccountLayout。之后你把登录、注册等几个核心组件移到了新的Components/External目录，还复制了AccountLayout改成ExternalLayout，想让这些独立组件用新布局，结果就出了无限循环的问题。

问题根源：布局组件被递归应用了 #

你引用的官方文档其实已经点出了关键：

Warning Do not add a Razor @layout directive to the root _Imports.razor file, which results in an infinite loop of layouts. To control the default app layout, specify the layout in the Router component. For more information, see the following Apply a default layout to an app section.

The same condition results when using an _Imports.razor file to apply a layout to a folder of components with the @layout directive and the layout component itself is in the same folder or folder hierarchy of the _Imports.razor file. An infinite loop of applying the layout occurs because the @layout directive is also applied to the layout component.

你的ExternalLayout放在Components/External/Shared里，而External目录下的_Imports.razor会作用于整个External文件夹（包括子目录的Shared）。这就导致ExternalLayout自己也被加上了@layout ExternalLayout的指令，相当于布局套布局，自然就无限循环了。

解决步骤 #

1. 调整文件夹结构，把布局组件独立出来

把布局组件移到一个和业务组件平级的独立目录，避免被_Imports.razor的作用域覆盖。调整后的结构大概是这样：

MyProject/
├── Components/
│   ├── External/
│   │   ├── Pages/
│   │   │   ├-- ForgotPassword.razor
│   │   │   ├-- Login.razor
│   │   │   ├-- Register.razor
│   │   │   └-- ResendEmailConfirmation.razor
│   │   └── _Imports.razor
│   ├── Layouts/
│   │   ├-- ExternalLayout.razor
│   │   ├-- MainLayout.razor
│   │   └── AccountLayout.razor
│   ├── Account/
│   │   ├── Pages/...
│   │   └── Shared/...

2. 修改External/_Imports.razor的布局指令

把原来的@layout ExternalLayout改成完整的命名空间引用，确保只作用于External/Pages下的业务组件，不会影响到独立的布局组件：

@using MyProject.Components.Account.Shared
@using MyProject.Components.Layouts
@layout ExternalLayout

3. 确认ExternalLayout.razor的逻辑

你的ExternalLayout代码本身是没问题的，不过现在它在独立的Layouts目录，不会被External的_Imports影响，所以可以保持原来的逻辑：

@inherits LayoutComponentBase
@inject NavigationManager NavigationManager

@if (HttpContext is null) {
    <p>Loading...</p>
} else {
    @Body
}

@code {
    [CascadingParameter]
    private HttpContext? HttpContext { get; set; }

    protected override void OnParametersSet() {
        if (HttpContext is null) {
            NavigationManager.Refresh(forceReload: true);
        }
    }
}

4. 检查Routes.razor的配置

确保Router组件的默认布局是MainLayout，不要和你的ExternalLayout冲突，比如：

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

这样External下的组件会通过自己的_Imports使用ExternalLayout，其他组件则用默认的MainLayout，互不干扰。

5. 额外注意事项

• 不要在根目录的_Imports.razor里添加@layout指令，避免全局递归问题
• 确保External/Pages下的组件没有单独添加@layout指令，让目录的_Imports统一控制
• 测试前清除浏览器缓存，避免旧的布局缓存导致异常

内容来源于stack exchange