Blazor NavMenu does not get default with @page "/" and querystring

Viewed 309

We have a starting page that is declared like this.

@page "/"
@inherits PageBase
@using GroupTool.Blazor.Core
@using Microsoft.Extensions.Configuration
@using GroupTool.Blazor.Extensions
@inject IConfiguration _configuration
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]
@inject DialogService _dialogService


<div class="container linkpagecontainer">
    <div class="col-md-12 linkpagerowdiv">
        <div class="row linkpagerow">
            <div class="col col-md-5 d-none d-sm-flex flex-column grouplistbox groupboxleft">

The MainLayout used with this page is like this.

@inherits LayoutComponentBase
@using Microsoft.AspNetCore.Components.Authorization
@inject ILocalStorageService localStore
@inject NavigationManager NavigationManager
@using Blazored.LocalStorage;
@using Wur.GroupTool.Blazor.Core.Infrastructure;


<AuthorizeView>
    <Authorized>
        <div class="page mainpage">
            <div class="sidebar">
                <NavMenu />
            </div>
            <div class="main">
                <div class="top-row px-4 auth">
                    @if (DataLoaded)
                    {
                        <div class="main-header"><h2>@CourseDetails.Name @CourseCode Period: @Year-@PeriodNumber</h2></div>
                    }
                    <LoginDisplay />
                </div>
                <div class="content px-4 maincontent">
                    <RadzenNotification />
                    <RadzenTooltip />
                    <RadzenDialog />
                    @Body
                </div>
            </div>
        </div>
    </Authorized>
    <NotAuthorized>
        <div class="page">
            <div class="main">
                <div class="top-row px-4 auth">
                    <LoginDisplay />
                </div>
                <div class="content px-4">
                    @Body
                </div>
            </div>
        </div>
    </NotAuthorized>
</AuthorizeView>

As you can see a NavMenu is added which is like this.

<div class="top-row pl-4 navbar navbar-dark navbarheader">
    <a class="navbar-brand" href=""><img src="css/images/WUR_W.png" height="20"/> GroupTool</a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-people" aria-hidden="true"></span> Groups
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="linkgroups">
                <span class="oi oi-link-intact" aria-hidden="true"></span> Link Groups
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="schedule">
                <span class="oi oi-calendar" aria-hidden="true"></span> Schedule
            </NavLink>
        </li>
    </ul>
</div>
<footer class="footer">
    <div class="container-fluid">
        &copy; @DateTime.Today.Year WUR<br />version @System.Reflection.Assembly.GetExecutingAssembly().GetName().Version.ToString()
    </div>
</footer>

@code {
    private bool collapseNavMenu = false;

    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

Now the problem is that when I go to the startpage without a query string the menu shows like this.

enter image description here

When however I add a querystring like f.i. so.

https://localhost:44381/?CourseId=13890

The menu show up without the default set.

enter image description here

What do I need to do to get that working?

==EDIT==

I think it's a bug in Blazor. Take a look here: https://code-maze.com/query-strings-blazor-webassembly/ The article explains how to use query strings in Blazor but notice what happens to the menu in the images on the page. Exactly my problem.

==EDIT==

Reported a bug on Github: https://github.com/dotnet/aspnetcore/issues/31312

1 Answers

If I've understood your question correctly, what you want is to change

<NavLink class="nav-link" href="" Match="NavLinkMatch.All">

to

<NavLink class="nav-link" href="/" Match="NavLinkMatch.All">

this will allow the navlink matching to work with queryparameters

Related