Blazor Server中用NavigationManager更新history.state返回时为null的问题

你的问题出在时机错误和状态保存的对象不对：

1. 事件触发时机太晚：LocationChanged是在导航完成后才触发的，此时Blazor已经向浏览器历史栈中添加了新的路由条目。你调用replaceState修改的是新跳转后的历史条目，而用户返回时回到的是之前未被修改过的旧条目，自然读取到null。

2. 对象序列化隐患：如果myObject包含不可JSON序列化的内容（比如循环引用、Blazor组件实例、非基本数据类型），传递到JS后无法正常存入history.state，最终也会得到null。

修正方案 #

1. 切换到导航前事件保存状态

用NavigationManager.Navigating事件（导航发起前触发），在离开当前页面时，把状态保存到当前的历史条目中：

protected override Task OnInitializedAsync()
{
    NavigationManager.Navigating += OnNavigating;
    // 页面初始化时读取返回的历史状态
    _ = RestoreStateFromHistory();
    return base.OnInitializedAsync();
}

private async void OnNavigating(object sender, NavigatingEventArgs args)
{
    // 保存当前状态到当前历史条目
    await JSRuntime.InvokeVoidAsync("updateCurrentHistoryState", myObject);
}

private async Task RestoreStateFromHistory()
{
    // 读取历史状态并恢复
    var savedState = await JSRuntime.InvokeAsync<MyObjectType>("getHistoryState");
    if (savedState != null)
    {
        myObject = savedState;
        StateHasChanged();
    }
}

public void Dispose()
{
    NavigationManager.Navigating -= OnNavigating;
}

2. 对应的JavaScript函数

// 保存当前状态到当前历史条目
function updateCurrentHistoryState(myObject) {
    // 保留原有历史状态，避免覆盖Blazor内部状态
    const currentState = window.history.state || {};
    currentState.stateObj = myObject;
    window.history.replaceState(currentState, "");
}

// 读取历史状态
function getHistoryState() {
    return window.history.state?.stateObj || null;
}

额外注意事项 #

• 确保myObject是可JSON序列化的纯数据对象，避免包含循环引用、组件实例、委托等无法序列化的内容。
• 如果使用Blazor Server预渲染，要在OnAfterRenderAsync中执行状态恢复逻辑（预渲染阶段JSRuntime不可用）。

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