Blazor点击NavMenu导航后页面未自动更新问题排查求助

问题根源 #

路由变化时复用了同一个Index组件实例，当前的分类数据加载逻辑仅在组件首次初始化时执行，路由参数更新后没有重新加载数据，导致UI没有变化。

具体原因 #

你的Index组件同时注册了@page "/"和@page "/{categoryurl}"两个路由，当你从首页导航到分类路由、或是在不同分类路由之间切换时，Blazor为了性能会复用已有的Index组件实例，只会更新组件的路由参数值，不会销毁重建组件。
你当前把分类数据加载逻辑写在OnInitialized生命周期方法中，这个方法只会在组件第一次被创建时执行一次，后续路由参数更新时不会再次触发，因此分类数据不会更新，手动调用StateHasChanged也不会生效。

修复方案 #

把分类数据加载逻辑迁移到OnParametersSet生命周期方法中即可，这个方法会在组件参数（包括路由参数）发生变化时自动执行：

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

    private Category category = null;

    protected override void OnParametersSet()
    {
        if (!string.IsNullOrEmpty(CategoryUrl))
        {
            category = CategoryService.Categories.FirstOrDefault(c => 
                c.Url.Equals(CategoryUrl, StringComparison.OrdinalIgnoreCase));
        }
        else
        {
            category = null;
        }
        // 无需手动调用StateHasChanged，OnParametersSet执行结束后会自动触发UI更新
    }
}

可选优化 #

检查你的Category类的Url字段存储格式，如果没有自带前导斜杠（比如存储的是laptop而不是/laptop），可以修改NavMenu里的NavLink href属性，手动添加前导斜杠避免路由匹配异常：

<NavLink class="nav-link" href="/@category.Url">

内容的提问来源于stack exchange，提问作者IntrepidShape