NavigationView disapears on page refresh in WASM

[KWodarczyk]

trafficstars

Current behavior

When application loads first time fired form Visual Studio in IIS it all good, but once a refresh button is clicked only "Page One" is shown but whole NavigationView is gone. Also MainPage ctor is not invoked when debugging not sure why.

Screen on first app load

Screen after refresh is clicked: (notice how url has changed) from Mian/One to just /One)

App.xaml.cs

    //skipped for brevity                
    .UseNavigation(RegisterRoutes)
                );
     MainWindow = builder.Window;
        
    #if DEBUG
            MainWindow.EnableHotReload();
    #endif
            MainWindow.SetWindowIcon();
    
            Host = builder.Build();
    
    
            await builder.NavigateAsync<Shell>();
    }

    private void RegisterRoutes(IViewRegistry views, IRouteRegistry routes)
    {
        views.Register(
            new ViewMap(ViewModel: typeof(ShellViewModel)),
            new ViewMap<MainPage, MainViewModel>(),
            new ViewMap<FirstPage, FirstViewModel>(),
            new DataViewMap<SecondPage, SecondViewModel, Entity>()
        );

        routes.Register(
            new RouteMap("", View: views.FindByViewModel<ShellViewModel>(),
                Nested:
                [
                    new ("Main", View: views.FindByViewModel<MainViewModel>(),IsDefault:true,
                    Nested:
                    [
                        new ("One", View: views.FindByViewModel<FirstViewModel>(),IsDefault:true),
                        new ("Two", View: views.FindByViewModel<SecondViewModel>())
                    ]),
                ]
            )
        );
    }

MainPage.xaml

<Page x:Class="UnoAppNavigation2.Presentation.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:UnoAppNavigation2"
      xmlns:Presentation="using:UnoAppNavigation2.Presentation"
      xmlns:uen="using:Uno.Extensions.Navigation.UI"
      xmlns:utu="using:Uno.Toolkit.UI"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <Grid uen:Region.Attached="True">

        <NavigationView
            uen:Region.Attached="true"
            PaneDisplayMode="Top"
            IsSettingsVisible="False"
            IsBackButtonVisible="Collapsed"
            IsBackEnabled="False">
            <NavigationView.MenuItems>

                <NavigationViewItem
                  Content="One"
                  x:Name="OneTab"
                  uen:Region.Name="One" />

                <NavigationViewItem
                  Content="Two"
                  x:Name="TwoTab"
                  uen:Region.Name="Two" />


            </NavigationView.MenuItems>

            <NavigationView.FooterMenuItems>

              <NavigationViewItem HorizontalAlignment="Left" Background="DarkSlateGray">
                  <TextBlock>
                    <Run Text="URL:"/>
                    <Run x:Name="UrlPath"/>
                  </TextBlock>
              </NavigationViewItem>

            </NavigationView.FooterMenuItems>

            <Grid uen:Region.Attached="True"
                  uen:Region.Navigator="Visibility">
            </Grid>
        </NavigationView>
    </Grid>
</Page>

MainPage.xaml.cs

public sealed partial class MainPage : Page
{
    private App _app;

    public MainViewModel ViewModel { get; set; }

    public MainPage()
    {
        _app = (Application.Current as App);

        this.InitializeComponent();

        UrlPath.Text = _app.MainHref;
    }
}

Expected behavior

I expect application to look exactly the same after refresh as before refresh.

How to reproduce it (as minimally and precisely as possible)

Just build the attached solution for wasm and run it in Visual Studio in debug mode. After application loads in the browser, refresh page UnoAppNavigation2.zip

Workaround

There is a workaround but it's not ideal since both pages load as soon as application loads even though only the fist page is set to Visible:

App.xaml.cs

    private void RegisterRoutes(IViewRegistry views, IRouteRegistry routes)
    {
        views.Register(
            new ViewMap(ViewModel: typeof(ShellViewModel)),
            new ViewMap<MainPage, MainViewModel>(),
            new ViewMap<FirstPage, FirstViewModel>(),
            new DataViewMap<SecondPage, SecondViewModel, Entity>()
        );

        routes.Register(
            new RouteMap("", View: views.FindByViewModel<ShellViewModel>(),
                Nested:
                [
                    new ("Main", View: views.FindByViewModel<MainViewModel>(),IsDefault:true)
                ]
            )
        );
    }

MainPage.xaml

            uen:Region.Attached="true"
            PaneDisplayMode="Top"
            IsSettingsVisible="False"
            IsBackButtonVisible="Collapsed"
            IsBackEnabled="False">
            <NavigationView.MenuItems>

                <NavigationViewItem
                  Content="One"
                  x:Name="OneTab"
                  IsSelected="True"
                  uen:Region.Name="One" />

                <NavigationViewItem
                  Content="Two"
                  x:Name="TwoTab"
                  uen:Region.Name="Two" />


            </NavigationView.MenuItems>

            <NavigationView.FooterMenuItems>

              <NavigationViewItem HorizontalAlignment="Left" Background="DarkSlateGray">
                  <TextBlock>
                    <Run Text="URL:"/>
                    <Run x:Name="UrlPath"/>
                  </TextBlock>
              </NavigationViewItem>

            </NavigationView.FooterMenuItems>

            <Grid uen:Region.Attached="True"
                  uen:Region.Navigator="Visibility">

              <!--thsi will work but both pages are loaded as soon as app load, not ideal-->
              <Presentation:FirstPage Visibility="Collapsed" uen:Region.Name="One"/>
              <Presentation:SecondPage Visibility="Collapsed" uen:Region.Name="Two"/>

            </Grid>
        </NavigationView>

Works on UWP/WinUI

None

Environment

Uno.WinUI / Uno.WinUI.WebAssembly / Uno.WinUI.Skia

NuGet package version(s)

"Uno.Sdk": "5.4.10"

Affected platforms

WebAssembly

IDE

Visual Studio 2022

IDE version

No response

Relevant plugins

No response

Anything else we need to know?

No response

[jeromelaban]

Thanks for the report. Can you specify what you mean by "refresh"?

[KWodarczyk]

sure,

[jeromelaban]

Thanks, this helps. This looks like an Extensions Navigation issue related to deep linking.

/cc @kazo0 @nickrandolph

[erikvilima]

Same as #2488

cc @kazo0

[DevTKSS]

Content of NavigationView is also disapearing on HotReload (Dektop Target) when using x:Bind => maybe Related to this reload because the VM is exchanged?

[DevTKSS]

@Kunal22shah would you check if that issue is the same source than the blank page resulting navigation you issued some days ago?