How to prevent routing in blazor

I create a nested layout in blazer.

blazor route to one of the navigation menus, and there is another menu in it.

When I click the navigation menu, it is routed to a specific page,
There is another menu on the routed page.

Clicking that menu loads the newly routed page in the nested layout.

However, clicking the topmost menu again loads the top route into the innermost layout.

Here is my code.

MainLayout.razor:

@inherits LayoutComponentBase

<div class="sidebar">
    <NavMenu />
</div>

<div class="main">
    <div class="top-row px-4">
        <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
    </div>

    <div class="content px-4">
        @Body
    </div>
</div>

NavMenu.razor:

<li class="nav-item px-3">
    <NavLink class="nav-link" href="sub">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Sub
    </NavLink>
</li>

SubMenu.razor:

@page "/sub"

@layout MainLayout
@inherits LayoutComponentBase

<h3>SubLayout</h3>

<div style="width:20%">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="/sub/mypage" Match="NavLinkMatch.All">
                <span class="oi oi-account-login" aria-hidden="true"></span> go to sub of sub
            </NavLink>
        </li>
    </ul>
</div>

<div style="width: 40%; height:40%; border:solid red">
    @Body
</div>

Mypage.razor:

@page "/sub/mypage"
@layout SubLayout

<div >
    <h3>This is Mypage</h3>
</div>

This is the execution result:

Why is the page in the top navigation menu loaded into the sublayout?
Is there any way to prevent this?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Without seeing your SubLayout you are specifying in Mypage.razor I think the issue is that your trying to use a routable component as a layout. I basically just separated these.

SubMenu.razor

@page "/sub"

<SubLayout />

SubLayout.razor

Note the nesting by specifying @layout MainLayout

@layout MainLayout
@inherits LayoutComponentBase

<h3>SubLayout</h3>

<div style="width:20%">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="/sub/mypage" Match="NavLinkMatch.All">
                <span class="oi oi-account-login" aria-hidden="true"></span> go to sub of sub
            </NavLink>
        </li>
    </ul>
</div>

<div style="width: 40%; height:40%; border:solid red">
    @Body
</div>

Docs are here

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0