How to differentiate layout for same route in .NET 9 MAUI Blazor Hybrid App?

Hi @Obakeng Aphane !

Thank you for reach out!

If you want to use the same route (e.g. @page "/home") in both your shared project and device‑specific project, but render different layouts or components depending on whether the app is running in a MAUI host (mobile/desktop) or in a Blazor Web context, the recommended approach is to centralize the decision in a platform abstraction service rather than duplicating routes or scattering DeviceInfo checks. Here are the recommended pattern you can try:

1. Define a Platform Abstraction

You can start by creating an interface that describes the runtime environment:

public interface IPlatformContext
{
    bool IsMobile { get; }
    bool IsWeb { get; }
}

And provide separate implementations for MAUI and Web:

// In MAUI project
public class MauiPlatformContext : IPlatformContext
{
    public bool IsMobile => DeviceInfo.Current.Idiom is DeviceIdiom.Phone or DeviceIdiom.Tablet;
    public bool IsWeb => false;
}
 
// In Blazor Web project
public class WebPlatformContext : IPlatformContext
{
   public bool IsMobile => false;
   public bool IsWeb => true;
}

Then register the correct implementation in MauiProgram.cs and Program.cs:

builder.Services.AddScoped<IPlatformContext, MauiPlatformContext>();
// or
builder.Services.AddScoped<IPlatformContext, WebPlatformContext>();

2. Use Conditional Layouts

Define multiple layouts (MobileLayout.razor, WebLayout.razor) and wrap them in a dynamic layout component:

@inherits LayoutComponentBase
@inject IPlatformContext Platform
 
@if (Platform.IsMobile)
{
    <MobileLayout>
        @Body
    </MobileLayout>
}
else
{
    <WebLayout>
        @Body
    </WebLayout>
}

Then in your page:

@page "/home"
@layout DynamicLayout
 
<h3>Home</h3>
<HomeContent />

This ensures the route stays the same, but the layout adapts automatically.

3. Swap Components Instead of Whole Layouts (Optional)

If only certain sections differ, you can conditionally render components instead of replacing the entire layout:

@if (Platform.IsMobile)
{
    <MobileHome />
}
else
{
    <WebHome />
}

This pattern is clean, testable, and scales well as you add more routes in your .NET 9 MAUI Blazor Hybrid app

Here are few thing to consider:

• Don’t duplicate routes (/home in multiple projects) → leads to conflicts.
• Don’t scatter DeviceInfo checks across components → brittle and hard to test.
• Don’t fork entire pages unless UI divergence is very large.

I hope this helps! If you have any questions, feel free to ask! If this solution aligns with what you’re looking for, please mark it as the "accepted answer" so others can benefit from it too. Thank you!