CODEWITHSUNDEEP
shellnavigationmaui
Arthur Rey
Arthur Rey

Reputation: 3058

Maui Shell Navigating from a single page to tab pages causes 'Relative routing to shell elements is currently not supported'

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

    <ShellContent Route="login" FlyoutItemIsVisible="False" ContentTemplate="{DataTemplate views:LoginPage}" />

    <ShellContent Route="products" Title="Products" ContentTemplate="{DataTemplate views:ProductsPage}" />

    <TabBar>
        <Tab Title="Product">
            <ShellContent Route="product" ContentTemplate="{DataTemplate views:ProductPage}" />
        </Tab>
        <Tab Title="Details">
            <ShellContent Route="details" ContentTemplate="{DataTemplate views:ProductDetailsPage}" />
        </Tab>
    </TabBar>
</Shell>

ProductsPage lists products. When I click on a product I would like to navigate to ProductPage, which shows two tabs to navigate between ProductPage and ProductDetailsPage.

Within the ProductsPage's viewmodel I'm calling await Shell.Current.GoToAsync($"product?id={product.Id}"). This raises Relative routing to shell elements is currently not supported. Try prefixing your uri with ///: ///product.

If I instead call await Shell.Current.GoToAsync($"///product?id={product.Id}") as suggested, I'm able to navigate to ProductPage and I can see the two tabs, but I can no longer see the native back arrow to go back to ProductsPage.

Is it possible to navigate from a single page to tab pages in the same stack? My two tab pages' route would be //products/product and //products/details so I'm able to navigate back to ProductsPage from both end.

Upvotes: 2

Views: 1324

Answers (1)

Guangyu Bai - MSFT
Guangyu Bai - MSFT

Reputation: 4521

First, you need to create the Register detail page routes. These detail pages can then be navigated to using URI-based navigation, from anywhere within the app.

Second, you can check this article about how to pass the data and how to Process navigation data using query property attributes.

Upvotes: 1

Related Questions