Blazor does not update upon NavMenu click

Question

I am hesitant to post this due to the abundance of "Blazor does not update after X" Questions being asked. I have come to the conclusion it is a common error for a large variety of issues. So first prior to outlining my problem I'll briefly describe what I've tried.

Calling StateHasChanged(); While perhaps more of a work around than a elegant solution. This still may be the answer for the time being. However I have placed this function call in a range of places where I'm modestly sure it would execute appropriately and it does not.

Here is a demonstration gif. As you can see clearly the URL will change however the page does not refresh until I do it manually. After the refresh everything works as intended. Demonstration

Here is my Index.blazor

@page "/"
@page "/{categoryurl}"
@inject ICategoryService CategoryService;
@using System.Security.Cryptography.X509Certificates

@if (category != null)
{
    <h1>Welcome to the @category.Name Section!</h1>
    <ProductList CategoryId="@category.Id" />
    

}
else
{
    <h1>Welcome to MyExampleWebsite</h1>
    <ProductList />
}


@code
{
    [Parameter]
    public string CategoryUrl { get; set; }

    private Category category = null;

    protected override void OnInitialized()
    {
        if (CategoryUrl != null)
        {
            category = CategoryService.Categories.FirstOrDefault(c => c.Url.ToLower().Equals(CategoryUrl.ToLower()));
            StateHasChanged();
        }
        else
        {
            category = null;
        }
    }
}

Here is my NavMenu.Blazor

    @inject ICategoryService CategoryService
    
    <div class="top-row pl-4 navbar navbar-dark">
        <a class="navbar-brand" href="">My example Blazor</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-home" aria-hidden="true"></span> Home
                </NavLink>
            </li>
            
            <li class="dropdown-divider"></li>
            @foreach (var category in CategoryService.Categories)
            {
                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="@category.Url" onClick="">
                        <span class="oi oi-@category.Icon" aria-hidden="true"></span> @category.Name 
                    </NavLink>
                </li>
            }
            
            @*Counter Page*@
            
            @*<li class="nav-item px-3">
                <NavLink class="nav-link" href="counter">
                    <span class="oi oi-plus" aria-hidden="true"></span> Counter
                </NavLink>
            </li>
            
            /*Fetch Data From server Page*/
            <li class="nav-item px-3">
                <NavLink class="nav-link" href="fetchdata">
                    <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
                </NavLink>
            </li>*@
        </ul>
    </div>
    
    @code {
        private bool collapseNavMenu = true;
    
        private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
    
        private void ToggleNavMenu()
        {
            collapseNavMenu = !collapseNavMenu;
        }
    
        protected override void OnInitialized()
        {
            CategoryService.LoadCategories();
        }
    
    }

Here is my Category Class

public class Category
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Url { get; set; }
        public string Icon { get; set; }

        public List<Product> Products { get; set; }
    }

Answer 1

You have to make the call of service on blazor lifecycle event OnParametersSet{Async} Lifecycle events

Because OnInitialized runs only on first render.

protected override void OnParametersSet()
{
    CategoryService.LoadCategories();
}