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

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.