Blazor .NET8：OnInitialized中导航致目标页面初始化两次求助

问题描述 #

在.NET 8（8.0.3）Blazor交互式服务器端渲染场景下，当源页面组件初始化阶段调用NavigationManager.NavigateTo重定向到目标页面时，目标页面的OnInitialized方法会执行两次：第一次能正确读取目标页面的查询参数和状态，第二次却复用源页面的旧状态，导致所有属性及通过[SupplyParameterFromQuery]获取的参数被重置，出现目标页面内容短暂显示后消失的问题。

重现控制台输出 #

uri: http://127.0.0.1:5045/page2?IsFirstVisit=true
uri: http://127.0.0.1:5045/page1

解决/绕过方案 #

方案1：将重移至OnAfterRenderAsync阶段执行 #

OnInitialized阶段组件尚未完成初始渲染，此时重定向会引发框架内部状态混乱。将重定向逻辑移至OnAfterRenderAsync，并确保仅执行一次：

修改/page1组件代码：

@page "/page1"

<div></div>

@code {
    private bool _hasRedirected = false;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && shouldRedirect)
        {
            _hasRedirected = true;
            NavigationManager.NavigateTo("/page2?IsFirstVisit=true");
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

方案2：使用服务器端路由规则直接重定向 #

绕过组件渲染流程，在全局路由配置中添加重定向规则，性能更优：

修改Program.cs代码：

var builder = WebApplication.CreateBuilder(args);

// 其他服务配置...

var app = builder.Build();

// 其他中间件配置...

// 添加重定向规则
app.MapWhen(context => 
    context.Request.Path == "/page1" && /* 你的重定向判断条件 */, 
    appBuilder =>
{
    appBuilder.Run(async context =>
    {
        context.Response.Redirect("/page2?IsFirstVisit=true");
    });
});

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.Run();

方案3：在目标页面中过滤无效状态初始化 #

在目标页面的OnInitialized方法中，先校验当前URI是否匹配目标页面路径，不匹配则跳过状态初始化：

修改/page2组件代码：

@page "/page2"

@if (_isWelcomeMessageVisible)
{
    <span>Welcome!</span>
}

@code {
    [Parameter]
    [SupplyParameterFromQuery]
    public bool IsFirstVisit { get; set; }

    private bool _isWelcomeMessageVisible { get; set; }

    protected override async Task OnInitializedAsync()
    {
        var currentPath = NavigationManager.ToAbsoluteUri(NavigationManager.Uri).AbsolutePath;
        if (currentPath != "/page2") return;

        Console.WriteLine("uri: " + NavigationManager.Uri);

        if (IsFirstVisit)
        {
            _isWelcomeMessageVisible = true;
        }
    }
}

方案适用场景 #

• 方案1适合需要在组件内根据业务逻辑动态判断重定向的场景，无需改动全局路由配置。
• 方案2适合固定规则的重定向需求，完全绕过组件渲染流程，性能最优。
• 方案3作为临时绕过手段，适合无法修改源页面重定向逻辑的情况。

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