Shell Routing in .NET MAUI

Shell Routing

Shell Routing is a navigation mechanism in .NET MAUI that allows you to navigate between pages using routes instead of manually managing navigation stacks. It supports deep linking and simplifies navigation across Flyout menus, tabs, and nested pages.

✅ What is Shell Routing?

Shell routing provides a way to:

• Register routes for pages.
• Navigate using route names.
• Pass and receive query parameters.

Register Routes

Routes are registered in AppShell.xaml.cs or code-behind:

//C#
public partial class AppShell : Shell
{
    public AppShell()
    {
        InitializeComponent();
        Routing.RegisterRoute("details", typeof(DetailsPage));
        Routing.RegisterRoute("profile", typeof(ProfilePage));
    }
}
    

Navigate Using Routes

Use GoToAsync() to navigate:

//C#
await Shell.Current.GoToAsync("details");
    

Pass Parameters

You can pass query parameters in the route:

//C#
await Shell.Current.GoToAsync("details?id=123&name=John");
    

Receive Parameters

Implement IQueryAttributable in the target page to receive parameters:

//C#
public class DetailsPage : ContentPage, IQueryAttributable
{
    public void ApplyQueryAttributes(IDictionary query)
    {
        var id = query["id"];
        var name = query["name"];
    }
}
    

✅ Advantages of Shell Routing

• Simplifies navigation (no manual stack management).
• Supports deep linking and parameter passing.
• Works across Flyout, Tabs, and nested navigation.

Example Shell Structure

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:MyApp"
       x:Class="MyApp.AppShell">

    <FlyoutItem Title="Home">
        <ShellContent ContentTemplate="{DataTemplate local:HomePage}" />
    </FlyoutItem>

    <FlyoutItem Title="Settings">
        <ShellContent ContentTemplate="{DataTemplate local:SettingsPage}" />
    </FlyoutItem>
</Shell>