How do you navigate from one component to another component in ASP.NET Core Blazor?

Navigating from link

There are two ways to link pages in Blazor:

• Using Anchor: We normally use this in HTML.
• Using NavLink: This is introduced in Blazor.

<h3>Anchor Link</h3>
<p>
    <a href="/navigate1">Navigate 1</a><br />
</p>

<h3>Nav Link</h3>
<p>
    <NavLink href="/navigate2">Navigate 2</NavLink><br />
</p>

Navigate from code

We can navigate to another component programmatically using the NavigationManager service:

1. Inject the service @inject directive.
2. Use the NavigateTo() method for navigation.

@page "/page1"
@inject NavigationManager UriHelper

<h3>Naviagte to another component Programatically</h3>
<button @onclick=@Navigate>Navigate</button>


@code {
void Navigate()
{
    UriHelper.NavigateTo("page2");
}
}