.NET MAUI从Shell导航Blazor页面时MainLayout不生效问题

MainLayout失效、导航后生成独立Blazor单页的核心原因是：参考TabBar导航方案实现时，每次Shell导航都会创建全新的BlazorWebView实例。新实例没有加载原有Blazor应用的路由表、服务容器、根组件布局配置，和初始启动的Blazor应用上下文完全隔离，自然无法复用MainLayout和全局配置。

要实现从AppShell Flyout导航到现有BlazorWebView内指定页面，不要为每个Blazor页面单独注册Shell路由，只需要保留一个承载BlazorWebView的根Shell页面，通过跨Blazor和MAUI的通信机制触发Blazor端路由跳转即可，具体实现步骤：

• 第一步：保留单一BlazorWebView宿主页
  首先清理AppShell中为单个Blazor Razor页面注册的所有Shell路由，只保留一个承载BlazorWebView的根ContentPage注册项，确保整个App生命周期内只有一个BlazorWebView实例运行，所有Blazor页面都在这一个实例内渲染。
  宿主页内的BlazorWebView固定加载配置了MainLayout的Blazor根组件App.razor，基础配置示例：

  <BlazorWebView x:Name="MainBlazorWebView" HostPage="wwwroot/index.html">
      <BlazorWebView.RootComponents>
          <RootComponent Selector="#app" ComponentType="{x:Type local:App}" />
      </BlazorWebView.RootComponents>
  </BlazorWebView>
  

• 第二步：实现MAUI到Blazor的导航事件传递
  在共享项目中定义导航服务，用来传递跨端导航请求，Flyout菜单点击时不要直接做Shell页面跳转，而是调用服务方法触发事件，传递目标Blazor路由地址：

  public class BlazorNavigationService
  {
      public event Action<string> NavigateToBlazorRoute;
      public void TriggerNavigation(string blazorRoute)
      {
          NavigateToBlazorRoute?.Invoke(blazorRoute);
      }
  }
  

  在MauiProgram.cs中将服务注册为单例，保证MAUI Shell侧和Blazor侧拿到的是同一个实例：

  builder.Services.AddSingleton<BlazorNavigationService>();
  

• 第三步：Blazor侧监听导航事件执行跳转
  在Blazor应用的MainLayout.razor或者App.razor根组件中，注入上面定义的导航服务和Blazor原生NavigationManager，组件初始化时绑定监听事件，收到导航请求时调用Blazor端原生导航方法即可。将监听逻辑放在根组件的原因是这类组件在Blazor应用生命周期内不会被销毁，可以持续接收请求，避免内存泄漏。
  代码示例：

  @implements IDisposable
  @inject BlazorNavigationService NavService
  @inject NavigationManager BlazorNavManager
  
  @* 原有MainLayout布局代码 *@
  
  @code {
      protected override void OnInitialized()
      {
          NavService.NavigateToBlazorRoute += OnRouteRequested;
          base.OnInitialized();
      }
  
      private void OnRouteRequested(string route)
      {
          BlazorNavManager.NavigateTo(route);
      }
  
      public void Dispose()
      {
          NavService.NavigateToBlazorRoute -= OnRouteRequested;
      }
  }
  

• 第四步：Flyout菜单绑定导航逻辑
  AppShell中Flyout的菜单项点击时，从DI容器中取出导航服务，调用TriggerNavigation传入对应Blazor页面的路由即可，全程不会销毁重建BlazorWebView，原有MainLayout、全局服务注入、页面状态都会完整保留。
  点击事件示例：

  private void OnSettingsMenuItemClicked(object sender, EventArgs e)
  {
      var navService = Current.Handler.MauiContext.Services.GetRequiredService<BlazorNavigationService>();
      navService.TriggerNavigation("/settings");
  }
  

• 不要给单个Razor组件配置@page路由后，就直接把组件类型挂到Shell的ContentPage模板上，这种写法会让MAUI为该组件单独创建新的BlazorWebView宿主，完全脱离原有Blazor应用上下文。
• 如果需要做TabBar选中状态和Blazor路由的双向同步，只需要在Blazor端路由变化时，反过来调用MAUI侧的服务更新Shell的TabBar选中状态即可，逻辑和上述导航传递逻辑一致。
• 如果需要传递页面参数，直接将参数拼接到路由字符串中即可，Blazor端的NavigationManager原生支持路由参数、查询参数解析，和普通Blazor应用内导航行为完全一致。

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