How to nest layouts and routing in Blazor?

Question

I use following folder structure to organize my blazor wasm project:

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

I've created a layout, that I want to use in most of the features.

I came up with following idea but I am struggling to implement this in blazor. SubPageLayout.razor:

@inherits LayoutComponentBase
@layout MainLayout

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

Then I would create an Feature A/Index.razor page that uses the layout:

@page "/feature"
@layout SubPageLayout

<FeatureTitle>Feature A</FeatureTitle>

<Menu>
    ...
</Menu>

@Body

Then in Page1.razor:

@page "/feature/page-1"

<PageTitle>Page 1</PageTitle>

Content...

I have two related questions:

• What is the blazor-way to implement this nested layout?
• How can localhost/feature be redirected to localhost/feature/page? /feature in itself is just a wrapper providing a common layout and navigation for all the pages of that feature.

Answer 1

Blazor Solution

First I created a component that will act as a layout. 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; }
}

Now I can use this component to create a layout. E.g. Features/FeatureA/Components/FeatureALayout.razor:

@inherits LayoutComponentBase
@layout MainLayout

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

In Features/FeatureA/_Imports.cs apply the layout to all pages of that feature:

@layout Components.FeatureALayout

To redirect from /feature-a to /feature-a/page-1 implement /Features/FeatureA/Index.razor:

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

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

All the resources that helped me:

• https://learn.microsoft.com/en-us/aspnet/core/blazor/components/layouts?view=aspnetcore-6.0#nested-layouts
• template a blazor RenderFragment to a layout from a page or component
• 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

Solution using BlazorRouter (like react-router)

In you MainLayout:

<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>

In 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>

The index page contains the nested layout. Switch will load the page depending on the current url.