Blazor Hybrid App how to navigate to pages

Question

How can I navigate between Razor pages in an Blazor Hybrid App? I found this explanation: https://docs.microsoft.com/en-us/aspnet/core/blazor/hybrid/routing?view=aspnetcore-6.0

But I have no idea how to set the target (Razor Page) in a button for example. I like to create a navigation bar. Sorry I’m new in Blazor and Hybrid Apps.

Answer 1

Does your question is How to set the target (Razor Component) in a button? Because Blazor App can't host a Razor Pages App, So I think it may be that you wrote Razor Component as Razor Page or I misunderstood your question. IF you want to set the target (Razor Component) in a button in navigation bar, You can do it by following the steps below:

(.NET MAUI Blazor App )

First, create a new Razor Component and set the link

@*set the link to this page *@
@page "/Test"


<h1> This is a new Test Page</h1>

@code {
  //.......
}

Then in Shared/NavMenu.razor, Set the target (Razor Component) in a button in navigation bar

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">

        @*other navigation button*@

        @*add the new button here*@
        <div class="nav-item px-3">
            @*set the link of the button*@
            <NavLink class="nav-link" href="Test">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Test
            </NavLink>
        </div>
    </nav>
</div>

The new navigation button you created will be displayed here.

(If I misunderstood your question please let me know and I will change my answer as soon as possible)