In Blazor MAUI with a shared UI library, navigation doesn't work

Question

In a shared blazor library, login page and sample page are defined.

Here is the Minimum Reproducible Example: https://github.com/johnmangam/ShellNavigation/

Login.razor

@page "/login"

@inject NavigationManager navigationManager

<button @onclick="onclick"></button>

@code {
    private void onclick()
    {
        navigationManager.NavigateTo("/sample");
    }
}

Sample.razor

@page "/sample"

The above two pages that are created in the shared razor library are made use in a blazor maui project as shell tabbar shellcontents as shown below.

App.xaml

<Application.MainPage>
  <Shell >
    <TabBar>
      <Tab >
        <ShellContent Title="Login" Route="login">
          <ShellContent.ContentTemplate>
            <DataTemplate>
              <ContentPage Shell.NavBarIsVisible="False" NavigationPage.HasNavigationBar="False">
                <BlazorWebView HostPage="wwwroot/index.html">
                  <BlazorWebView.RootComponents>
                    <RootComponent Selector="#app" ComponentType="{x:Type sharedlibrarypages:Login}" />
                  </BlazorWebView.RootComponents>
                </BlazorWebView>
              </ContentPage>
            </DataTemplate>
          </ShellContent.ContentTemplate>
        </ShellContent>
      </Tab>

      <Tab Title="Sample">
        <Tab.Icon>
          <FontImageSource Size="24"
        FontFamily="material-icons"
        Glyph="{x:Static icons:MaterialIcons.Sample}"/>
        </Tab.Icon>
        <ShellContent Title="Sample" Route="sample">
          <ShellContent.ContentTemplate>
            <DataTemplate>
              <ContentPage>
                <BlazorWebView HostPage="wwwroot/index.html">
                  <BlazorWebView.RootComponents>
                    <RootComponent Selector="#app" ComponentType="{x:Type sharedlibrarypages:Sample}" />
                  </BlazorWebView.RootComponents>
                </BlazorWebView>
              </ContentPage>
            </DataTemplate>
          </ShellContent.ContentTemplate>
        </ShellContent>
      </Tab>


To register their routes, I've done this in the MauiProgram.cs

**MauiProgram.cs**

public static class MauiProgram { public static MauiApp CreateMauiApp() { var builder = MauiApp.CreateBuilder(); builder .UseMauiApp<App>() .ConfigureFonts(fonts => { fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); fonts.AddFont( "MaterialIcons-Regular.ttf", "material-icons"); });

    builder.Services.AddMauiBlazorWebView();
    
    //builder.Services.AddRazorPages();

#if DEBUG builder.Services.AddBlazorWebViewDeveloperTools(); builder.Logging.AddDebug(); #endif

    //I've done this to enable routing - not sure about these

    builder.Services.AddTransient<Login>();
    builder.Services.AddTransient<Sample>(); 


    Routing.RegisterRoute("/login", typeof(Login));
    Routing.RegisterRoute("/sample", typeof(Sample));
   
    return builder.Build();
}

}

When the app is running, the Login page from the shared library is visible and when I click the button, the **Navigate code executes but it is not navigating.**

Answer 1

In Blazor MAUI, the navigation between Blazor pages can be handled by the NavigationManager service, which you are injecting and using correctly. However, when integrating with MAUI and using Shell, the MAUI navigation system also comes into play. The NavigationManager may not be aware of the MAUI Shell navigation, causing the navigation not to work as expected.

One solution is to use the Shell navigation methods directly instead of the NavigationManager. For this, you need to inject IShellNavigationManager in your Blazor page and use its methods for navigation.

Here's how you might modify your Login.razor page:

@inject IShellNavigationManager shellNavigationManager

<button @onclick="OnClick"></button>

@code {
    private void OnClick()
    {
        shellNavigationManager.GoToAsync("//sample");
    }
}

By using IShellNavigationManager, you are directly interacting with the MAUI Shell navigation system, which should resolve the navigation issue when using Shell in Blazor MAUI apps.