.NET MAUI Blazor应用：非Shell页面间导航失效问题求解

我开发了一个带TabBar的Shell的.NET MAUI Blazor应用，在Blazor页面Counter上尝试跳转至另一Blazor页面weather时，使用NavigationManager跳转路由无任何反应。目标页面不属于Shell，附上相关代码，请求指导正确的导航方法。

MainPage.xaml（更新后） #

<TabBar>
    <ContentPage Title="Home" IsVisible="Hidden">
        <BlazorWebView x:Name="blazorWebView2" HostPage="wwwroot/index.html">
            <BlazorWebView.RootComponents>
                <RootComponent Selector="#app" ComponentType="{x:Type pages1e:Routes}" />
            </BlazorWebView.RootComponents>
        </BlazorWebView>
    </ContentPage>

    <ShellContent Title="Health List" Icon="icons_task.png">
        <ContentPage Title="Health">
            <BlazorWebView x:Name="Survey2" HostPage="wwwroot/index.html">
                <BlazorWebView.RootComponents>
                    <RootComponent x:Name="root" Selector="#app" ComponentType="{x:Type pagese:Home}" />
                </BlazorWebView.RootComponents>
            </BlazorWebView>
        </ContentPage>
    </ShellContent>

    <ShellContent Title="Add Provider" Icon="account.png">
        <ContentPage Title="Add Provider">
            <BlazorWebView x:Name="Survey1" HostPage="wwwroot/index.html">
                <BlazorWebView.RootComponents>
                    <RootComponent x:Name="Survey21" Selector="#app" ComponentType="{x:Type pagese:Counter}" />
                </BlazorWebView.RootComponents>
            </BlazorWebView>
        </ContentPage>
    </ShellContent>
</TabBar>

我想从Counter页面跳转至路由为/weather的页面

weather.razor #

@page "/weather"
<!-- Submit Button -->
<button @onclick="AlertAndNavigate" class="submit-btn">Submit</button>

@code {
    // Inject the NavigationManager
    [Inject] private NavigationManager Navigation { get; set; }

    public async Task AlertAndNavigate()
    {
        Navigation.NavigateTo("/weather");

        // await Shell.Current.GoToAsync("//Home"); // 此代码可正常跳转到Shell的Home菜单
    }
}

问题原因及解决方法 #

核心问题 #

当前结构中，每个ShellContent内的BlazorWebView都是独立实例，各自绑定单个Blazor组件（如Counter），未启用Blazor路由系统。NavigationManager仅在Blazor路由生效的环境下工作，而Counter所在的BlazorWebView未加载Routes组件，无法识别/weather路由。

正确实现方式 #

1. 统一使用Blazor路由系统（推荐）

保留TabBar中隐藏的Home页面（绑定Routes组件）作为Blazor路由载体，其他Tab项通过Shell导航切换到该页面，再用Blazor路由跳转内部页面：

• 修改ShellContent配置，让所有Tab项指向加载Routes组件的BlazorWebView：

<ShellContent Title="Health List" Icon="icons_task.png" Route="health">
    <ShellContent.ContentTemplate>
        <ContentPage>
            <BlazorWebView HostPage="wwwroot/index.html">
                <BlazorWebView.RootComponents>
                    <RootComponent Selector="#app" ComponentType="{x:Type pages1e:Routes}" />
                </BlazorWebView.RootComponents>
            </BlazorWebView>
        </ContentPage>
    </ShellContent.ContentTemplate>
</ShellContent>

<ShellContent Title="Add Provider" Icon="account.png" Route="counter">
    <ShellContent.ContentTemplate>
        <ContentPage>
            <BlazorWebView HostPage="wwwroot/index.html">
                <BlazorWebView.RootComponents>
                    <RootComponent Selector="#app" ComponentType="{x:Type pages1e:Routes}" />
                </BlazorWebView.RootComponents>
            </BlazorWebView>
        </ContentPage>
    </ShellContent.ContentTemplate>
</ShellContent>

• 在Routes.razor中配置完整路由规则，同时处理Shell导航参数，自动跳转到对应Blazor页面。

2. 直接跳转至独立页面

若不想统一路由，可通过MAUI页面导航打开新的ContentPage，内部包含绑定weather组件的BlazorWebView：
修改Counter页面的跳转逻辑：

public async Task AlertAndNavigate()
{
    var weatherPage = new ContentPage
    {
        Title = "Weather",
        Content = new BlazorWebView
        {
            HostPage = "wwwroot/index.html",
            RootComponents =
            {
                new RootComponent("#app", typeof(weather))
            }
        }
    };
    await Shell.Current.Navigation.PushAsync(weatherPage);
}

3. 启用Shell与Blazor路由联动

在Program.cs中注册路由联动服务，让Shell导航识别Blazor路由：

builder.Services.AddMauiBlazorWebView();
builder.Services.AddRouting();

随后在Shell中配置路由映射，关联Blazor路由与Shell导航。

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