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.

Basically you can't use sub layouts with the "out-of-the-box" LayoutBase. But , there's nothing stopping you building your own more complex version. You can get the code from the DotNetCore Repo on Github. It all depends on how dynamic you want to be. How do you know Feature A has Pages A-1 and A-2 and Feature B has pages B-1, B-2, B-3, B-4, ..... — MrC aka Shaun Curtis
– MrC aka Shaun Curtis, Commented Jan 5, 2022 at 12:56

DarkLeafyGreen · Accepted Answer · 2022-01-06 10:32:36Z

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:

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.

Collectives™ on Stack Overflow

How to nest layouts and routing in Blazor?

1 Answer 1

Blazor Solution

Solution using BlazorRouter (like react-router)

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Blazor Solution

Solution using BlazorRouter (like react-router)

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related