.NET Core 3.1 Blazor动态页面导航时标签头未同步更新问题求解

问题根因 #

1. Blazor路由默认会复用同路由模板的组件实例：你使用@page "/dynamic/{PageName}"的路由规则，在不同页面间导航时，Blazor不会销毁重建DynamicPage、MyDynamicContent、MyTabs组件，仅会更新PageName参数。
2. 标签头的渲染依赖MyTabs中私有tabItems列表：该列表仅在MyTabItem初始化时新增项、MyTabItem销毁时移除项。而你循环渲染MyTabItem时未添加@key标记，Blazor差分渲染时会复用旧的MyTabItem实例，既不会触发旧实例的销毁逻辑移除旧标签，也不会触发新实例的初始化逻辑添加新标签，导致tabItems一直留存首次加载的标签项。
3. MyTabs cascading value 设置了IsFixed=true：该配置会让Blazor跳过 cascading 值的更新检测，子组件无法感知MyTabs实例的状态变化，进一步加剧了状态不同步的问题。

解决方案 #

最简方案（推荐，适配.NET Core 3.1） #

直接给MyDynamicContent.razor里的MyTabs组件添加@key标记，值绑定PageName，每次PageName变化时强制销毁重建整个MyTabs组件，所有状态自动重置：

<MyTabs @key="PageName" SelectedTab="@selectedTabTitle" OnSelectedTabChanged="OnSelectedTabChanged">
    @foreach (var (tabId, tabContent) in currentPage)
    {
        <MyTabItem Title="@tabId">
            @tabContent
        </MyTabItem>
    }
</MyTabs>

优化方案 #

如果不想重建整个MyTabs组件，可同时做两处修改：

1. 给循环渲染的MyTabItem添加@key，强制Blazor正确识别组件的销毁/创建逻辑：

@foreach (var (tabId, tabContent) in currentPage)
{
    <MyTabItem @key="tabId" Title="@tabId">
        @tabContent
    </MyTabItem>
}

2. 移除MyTabs.razor里CascadingValue的IsFixed=true配置：

<CascadingValue Value="@(this)">

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