MAUI Blazor使用MAUI路由切换页面时出现加载闪烁问题求助

我希望实现MAUI页面切换以获得更原生的体验。为Counter页面创建了CounterPage.xaml并将其注册为单例，使用await App.Current.MainPage.Navigation.PushModalAsync(new CounterPage());导航时，总是出现类似WASM的快速闪烁“Loading...”加载整个应用的情况。请问哪里操作错了？是因为使用了new CounterPage()吗？

相关代码示例 #

Index.razor #

@page "/"

<h1>Index</h1>

<button class="btn btn-secondary" @onclick="NavigateToCounterPage">MAUI navigation Counter</button>

@code {
    async void NavigateToCounterPage()
    {
        await App.Current.MainPage.Navigation.PushModalAsync(new CounterPage());
    }
}

CounterPage.xaml #

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:pages="clr-namespace:MAUIBlazorMAUIPageTransition.Pages"
             x:Class="MAUIBlazorMAUIPageTransition.CounterPage"
             Title="CounterPage">
    <BlazorWebView HostPage="wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type pages:Counter}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>
</ContentPage>

CounterPage.xaml.cs #

namespace MAUIBlazorMAUIPageTransition;

public partial class CounterPage : ContentPage
{
    public CounterPage()
    {
        InitializeComponent();
    }
}

MauiProgram.cs #

builder.Services.AddSingleton<CounterPage>();

问题原因及解决办法 #

核心问题 #

1. 单例注册未生效：你虽然在DI容器里注册了CounterPage为单例，但导航时用new CounterPage()直接实例化，完全绕过了DI容器，每次点击都会创建全新的CounterPage实例。
2. BlazorWebView重复初始化：每个新的CounterPage里的BlazorWebView都会重新加载wwwroot/index.html并初始化Blazor运行时，这个过程必然触发默认的“Loading...”提示，导致闪烁。

解决步骤 #

1. 正确使用DI获取单例实例

修改Index.razor的导航逻辑，通过依赖注入获取已注册的单例CounterPage，而非直接new：

@page "/"
@inject CounterPage CounterPageInstance

<h1>Index</h1>

<button class="btn btn-secondary" @onclick="NavigateToCounterPage">MAUI navigation Counter</button>

@code {
    async Task NavigateToCounterPage()
    {
        await App.Current.MainPage.Navigation.PushModalAsync(CounterPageInstance);
    }
}

注意：把async void改为async Task，避免异步操作的潜在异常无法捕获的问题。

2. 优化加载提示（可选）

如果仍有轻微闪烁，可修改wwwroot/index.html的默认加载提示，比如替换为空白或更贴合原生风格的内容：

<div id="app">
    <!-- 移除默认Loading提示，或替换为自定义内容 -->
</div>

3. 纯Blazor组件导航（推荐）

如果你的场景不需要混合原生MAUI页面，更建议使用Blazor内置的路由导航，这种方式不会新建BlazorWebView，完全在同一运行时内切换组件，体验更流畅：

@page "/"
@inject NavigationManager NavManager

<h1>Index</h1>

<button class="btn btn-secondary" @onclick="NavigateToCounter">Blazor navigation Counter</button>

@code {
    void NavigateToCounter()
    {
        NavManager.NavigateTo("/counter");
    }
}

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