如何在 Blazor 中嵌套布局和路由？

Question

我使用以下文件夹结构来组织我的 blazor wasm 项目：

Features
    - Components
    - Feature A
        - Components
        - Page1.razor
        - Page2.razor
    Index.razor
Shared
    - MainLayout.razor

我已经创建了一个布局，我想在大多数功能中使用它。

我提出了以下想法，但我正在努力在 blazor 中实现这一点。子页面布局.razor：

@inherits LayoutComponentBase
@layout MainLayout

<div>
    <span>@FeatureTitle</span>
    @Menu
    <div class="container">
        <span>@PageTitle</span>
        <div class="content">
           @Body
        </div>
    </div>
</div>

然后我将创建一个使用以下布局的功能 A/Index.razor 页面：

@page "/feature"
@layout SubPageLayout

<FeatureTitle>Feature A</FeatureTitle>

<Menu>
    ...
</Menu>

@Body

然后在Page1.razor中：

@page "/feature/page-1"

<PageTitle>Page 1</PageTitle>

Content...

我有两个相关问题：

• 实现这种嵌套布局的 blazor 方式是什么？
• 如何将 localhost/feature 重定向到 localhost/feature/page？/feature 本身只是一个包装器，为该功能的所有页面提供通用布局和导航。

Answer 1

布拉佐解决方案

首先，我创建了一个充当布局的组件。Features/Components/SubPageLayout.razor:

<div class="container">
    <div class="sidebar">
        <span>@Title</span>
        @Menu
    </div>
    @PageContent
</div>

@code
{
    [Parameter]
    public string Title { get; set; } = String.Empty;

    [Parameter]
    public RenderFragment? Menu { get; set; }
    
    [Parameter]
    public RenderFragment? PageContent { get; set; }
}

现在我可以使用这个组件来创建布局。例如Features/FeatureA/Components/FeatureALayout.razor：

@inherits LayoutComponentBase
@layout MainLayout

<SubPageLayout Title="FeatureA">
    <Menu>
        <ul>...</ul>
    </Menu>
    <PageContent>
        @Body
    </PageContent>
</SubPageLayout>

将Features/FeatureA/_Imports.cs布局应用于该功能的所有页面：

@layout Components.FeatureALayout

要从 /feature-a 重定向到 /feature-a/page-1 ，请执行以下操作/Features/FeatureA/Index.razor：

@page "/feature-a"
@inject NavigationManager NavManager

@code {
    protected override void OnInitialized()
    {
        NavManager.NavigateTo("/feature-a/page-1");
    }
}

所有对我有帮助的资源：

• https://learn.microsoft.com/en-us/aspnet/core/blazor/components/layouts?view=aspnetcore-6.0#nested-layouts
• 将 blazor RenderFragment 从页面或组件模板化为布局
• https://github.com/dotnet/aspnetcore/issues/16009#
• https://blazor-university.com/layouts/nested-layouts/
• https://chrissainty.com/blazor-bites-layouts/
• https://github.com/dotnet/aspnetcore/issues/16009#issuecomment-390932846
• https://github.com/dotnet/aspnetcore/issues/11671

使用BlazorRouter 的解决方案（如 React-router）

在你的主布局中：

<nav>
    <NavLink Href="/feature-a">Feature-A</MudNavLink>
</nav>
<main>
    <Switch>
        <Route Template="feature-a/*">
            <BlazorUI.Features.FeatureA.Index />
        </Route>
        <Route>
            <p>404</p>
        </Route>
    </Switch>
</main>

在Features/FeatureA/Index.razor：

@page "/feature-a"
@inherits LayoutComponentBase
@layout MainLayout
@inject NavigationManager NavManager

@code {
    protected override void OnInitialized()
    {
        NavManager.NavigateTo("/feature-a/page-1");
    }
}

<div class="sub-layout">
    <ul>...</ul>
    <div class="content">
        <Switch>
            <Route Template="feature-a/page-1">
                <Page1/>
            </Route>
            <Route>
                <p>No content found in nested layout</p>
            </Route>
        </Switch>
    </div>
</div>

索引页包含嵌套布局。Switch 将根据当前 url 加载页面。