OnInitializedAsync method is not getting call while changing the query string value

Question

I am working on Blazor server side application and have a header where dynamic menu is binding. Also have a category page where i am showing the data on the basis of query string which is already bind in header menu.

OnInitializedAsync method is getting called once I select the menu and category page is showing the data on behalf of query string value but again I open the menu and selecting different product then category page is not getting called.

Below the code for header menu.

Header.razor(this is registered on main layout page)

<ul class="cat_menu">
    @if (categoryDtos == null)
    {
         <div>Loading...</div>
    }
    else
    {
         @foreach (var category in categoryDtos)
         {
          <li><a href="category/@category.Id">@category.Name<i class="fas fa-chevron-right"></i></a></li>
          }
   }
</ul>

 public class HeaderBase : ComponentBase
{
    [Inject] public IToastService toastService { get; set; }

    [Inject] ICategoryService categoryService { get; set; }

    public List<CategoryDto> categoryDtos { get; set; }

    protected async override Task OnInitializedAsync()
    {
        var categoryLIst = await categoryService.GetCategories();

        if (categoryLIst.Data != null)
        {
            categoryDtos = categoryLIst.Data.ToList();
            toastService.ShowSuccess("Fetch successfully");
        }
        else
        {
            toastService.ShowError(categoryLIst.Message);
        }
    }

    
}

Product.razor page

 @page "/category/{categoryID}"

   <ul class="sidebar_categories">

                        @if (categoryTypeDtos == null)
                        {
                            <div>Loading...</div>
                        }
                        else
                        {
                            @foreach (var category in categoryTypeDtos)
                            {
                                <li><a href="#">@category.Name</a></li>
                            }
                        }
                    </ul>

 public class CategoryBase : ComponentBase
{
    [Inject] public IToastService toastService { get; set; }
    [Parameter] public string categoryID { get; set; }

    [Inject] ICategoryService categoryService { get; set; }

    public List<CategoryTypeDto> categoryTypeDtos { get; set; }

    protected async override Task OnInitializedAsync()
    {

        var response = await categoryService.GetCategoryTypeByID(Guid.Parse(categoryID));
        if (response.Data != null)
        {
            categoryTypeDtos = response.Data.ToList();
            toastService.ShowSuccess("Fetch successfully");
        }
        else
        {
            toastService.ShowError(response.Message);
        }
    }
}

Answer 1

OnInitialized is only called when the component or page is first created.

A new url that renders the same component will use the instance. You need OnParametersSetAsync instead.