Why does navigation stop working in .Net Maui

Question

I am having this problem where my navigation just seems to stop working in my Maui app. I generally use:

Shell.Current.GoToAsync(route);

to go between pages.

But every now and then it just stops working. Most of the time there are no error messages or any exceptions being thrown, but sometimes I do get strange exceptions.

Also, I have one page in particular which I get stuck on every time I navigate to it. I just can't seem to navigate anywhere from it. I tried using ".." as the route but that doesn't work either.

I just have the feeling I am missing something.

My app is probably a bit too complex to upload a working example, but the shell looks like below. The page I have trouble with is the SelectorPage. I navigate to it using:

Shell.Current.GoToAsync("SelectorPage");

then on that page I try to navigate back using these:

Shell.Current.GoToAsync("LoginPage");
Shell.Current.GoToAsync("..");

but nothing happens. Putting a breakpoint on the code shows me the code is executed.

Any thoughts?

<?xml version="1.0" encoding="UTF-8" ?>
<Shell x:Class="xxx.AppShell"
            xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              FlyoutHeaderBehavior="CollapseOnScroll"
            FlyoutWidth="300"             >
  
<!-- Initial load goes to LoadingPage, which then determines route to take -->
    <ShellItem FlyoutItemIsVisible="False" x:Name="LoadingPageShellItem">
        <ShellContent ContentTemplate="{DataTemplate views:LoadingPage}" Route="LoadingPage" />
    </ShellItem>

    <FlyoutItem Title="Home" FlyoutIcon="homemenu.png" x:Name="MainPageShellItem">

        <ShellContent Title="Home" Icon="home.png" ContentTemplate="{DataTemplate views:HomeMainPage}" Route="HomeMainPage"/> 
        <ShellContent Title="Notifications" Icon="alert.png" ContentTemplate="{DataTemplate views:NotificationsPage}" Route="NotificationsPage" />

        <!--Split tab for message page-->
        <Tab Title="Chat" Icon="msg.png">
            <ShellContent Title="Messages" ContentTemplate="{DataTemplate views:MessagesPage}" Route="MessagesPage" />
            <ShellContent Title="Message Board" ContentTemplate="{DataTemplate views:MessageBoardPage}" Route="MessageBoardPage" />
        </Tab>

    </FlyoutItem>

    <FlyoutItem Title="Login" FlyoutIcon="logoff.png" x:Name="LoginPageShellItem" FlyoutItemIsVisible="False">
        <ShellContent ContentTemplate="{DataTemplate views:LoginPage}" Route="LoginPage" />
    </FlyoutItem>

</Shell>

EDIT: I have a working example here if anyone cares to have a look: https://pdscode.com.au/wp-content/uploads/2023/02/MauiApp3.zip

I can't reproduce the exact problem in this but I do see glitches. The app has 16 'wizard' pages. After that you go to a login page which takes you to the main app. From the burger menu you can choose Reset to go back to the start. I notice that stops working after you go through a couple of times. However, hopefully someone will be able to look and tell me if I have done something terribly wrong!

Thanks

Answer 1

I had a similar issue where routing just stopped working. I was debugging my code line by line and all of a sudden I reached "the end of the call stack" and it went back to the UI. What was really happening though was a NULL reference exception was being thrown and Visual Studio did not alert me or break on the exception being thrown. It was being swallowed by Visual Studio. Took many additional try/catch blocks to find it. I had a object I was using when the new content page was loading that was null and I didn't properly handle that case.

If you have a similar problem where routing just stops this could be something to look out for as it seems Visual Studio will not always tell you about exceptions.

Answer 2

Try it this way:

Shell.xaml

<ShellContent ContentTemplate="{DataTemplate views:LoginPage}" Route="login_page" /> 

Shell.xaml.cs

public partial class AppShell : Shell
{
    public AppShell()
    {
        InitializeComponent();
        Routing.RegisterRoute("selector_page", typeof(SelectorPage));
    }
}

For example, you want to go from page LoginPage to page SelectorPage: in the codebehind(LoginPage) or in the LoginViewModel write the full path

Shell.Current.GoToAsync("//login_page/selector_page");

You can also enable the navigation bar for page SelectorPage so you can then navigate back to page LoginPage

public partial class SelectorPage : ContentPage{
protected override void OnAppearing() {
        base.OnAppearing();
        Shell.SetNavBarIsVisible(this, true);
    }

    protected override void OnDisappearing() {
        base.OnDisappearing();
        Shell.SetNavBarIsVisible(this, false);
    }
  }

Maybe this option will help you: Switch App Shell Tab programmatically to current page on tab, not with GotoAsync - Xamarin Forms/Maui App Shell

UPDATE: MainShellItem refers to the last NewPage16

I added a little to your Shell for more convenient debugging. Added new menu item with handler https://github.com/Octopon/MauiApp3 When debugging, pay attention to the method NavigateShell(string shellitemName)

Answer 3

I checked and tested your code. When you navigate a page, you can reset and return normally, but it will fail when you have multiple pages. In the Shell documentation:

When a route from the Shell visual hierarchy is navigated to, a navigation stack isn't created. However, when a page that's not in the Shell visual hierarchy is navigated to, a navigation stack is created.

There is no navigation stack in the shell, so you can't go back to the first page. You can try to use TabbedPage to realize the navigation of multiple pages.