Live Chat Icon For mobile
Live Chat Icon

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

Platform: Blazor| Category: Routing

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");
}
}

Share with

Share on twitter
Share on facebook
Share on linkedin

Related FAQs

Couldn't find the FAQs you're looking for?

Please submit your question and answer.