Removing navigated pages from stack in .NET MAUI app

Question

I'm using AppShell in my .NET MAUI app and here's the scenario:

I have Page1, Page2 and Page3 defined as my main tab in AppShell -- see below:

<FlyoutItem Title="Home" Icon="home.png">
   <Tab Title="Page 1" Icon="icon1.png">
      <ShellContent Route="Page1" ContentTemplate="{DataTemplate local: Page1}" />
   </Tab>
   <Tab Title="Page 2" Icon="icon2.png">
      <ShellContent Route="Page2" ContentTemplate="{DataTemplate local: Page2}" />
   </Tab>
   <Tab Title="Page 3" Icon="icon3.png">
      <ShellContent Route="Page3" ContentTemplate="{DataTemplate local: Page3}" />
   </Tab>
</FlyoutItem>

I tap on tab 3 and go to Page3. I then navigate to Page4 and from there to Page5 to fill out a form. I navigate to pages 4 and 5 by clicking page elements such as buttons, etc. The routes for Page4 and Page5 are defined in AppShell.xaml.cs -- see below:

...
Routing.RegisterRoute(nameof(Page4), typeof(Page4));
Routing.RegisterRoute(nameof(Page5), typeof(Page5));

After filling out the form, I want to send the user to Page2 but also remove Page4 and Page5 from the stack.

I tried the following but it's not working exactly right:

var route = $"//../../{nameof(Page2)}";
await Shell.Current.GotoAsync(route);

This does send the user to Page2 after I submit the form but doesn't seem to remove Page4 and Page5 from the stack. So, if I tap on Page3 on the tab bar, I still end up on Page5 instead of Page3. That's because originally, I got to Page5 through this path:

Page3 => Page4 => Page5.

How do I make sure I remove Page4 and Page5 from the navigation stack?

Answer 1

I can reproduce the problem. It seems a new issue for the maui. According to the official document about the Backwards navigation in the Maui Shell,

await Shell.Current.GoToAsync("../../route"); In this example, backwards navigation is performed twice, and then navigation to the specified route.

But it didn't work expectedly. So you can post a new issue on the github and use the following code to remove the page in the navigation stack before you navigate.

var stack = Shell.Current.Navigation.NavigationStack.ToArray();
for(int i = stack.Length - 1; i > 0; i--)
{
   Shell.Current.Navigation.RemovePage(stack[i]);
}
Shell.Current.GoToAsync("//Page2");

Answer 2

You want the stack to be cleared, and then be on Page2.

According to the doc, this is as simple as:

await Shell.Current.GotoAsync($"//{nameof(Page2)}");

maui shell navigation:

"//route" ... The matching page will REPLACE the navigation stack.