Blazor has a built-in routing mechanism that lets programmers specify and navigate between several routes or pages inside their apps. 

Routing in Blazor is configured through the Router component, which acts as a placeholder for rendering the appropriate component based on the current URL.

 

The @page Directive: Razor components' @page directive lets developers provide routes; alternatively, they can register routes in the application's initialization code. Routes may have parameters that can be retrieved and applied inside the related component.

@page "/ticket"

<h1>Ticket</h1>

In this example, when a user navigates to /ticketin their browser, the Ticket.razor component will be rendered.

 

Route Parameters:
You can define route parameters within the @page directive to capture values from the URL and use them within your component. Route parameters are enclosed in curly braces {}

@page "/ticket/{id:int}"

<h1>Ticket</h1>

 

@code {
   [Parameter]
   public int Id { get; set; }
}

The @page "/ticket/{id:int}" directive defines a route where the segment after /ticket/ is captured as an integer parameter named id.
The [Parameter] attribute on the Id property in the @code block makes the route parameter value available to the component.   

 

 

Optional Route Parameters:
You can make route parameters optional by adding a question mark ? after the parameter name.

@page "/user/{name?}"

<h1>Greeting</h1>

@if (!string.IsNullOrEmpty(Name))
{
   <p>Hello, @Name!</p>
}
else
{
   <p>Hello there!</p>
}

@code {
   [Parameter]
   public string Name { get; set; }
}

 

 

In your App.razor file (the main application layout), you'll find the <Router> component. This component is responsible for intercepting browser navigation events and rendering the appropriate component based on the current URL.  

<Router AppAssembly="@typeof(Program).Assembly">

   <Found Context="routeData">
       <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
       <FocusOnNavigate RouteData="@routeData" Selector="h1" />
   </Found>

   <NotFound>
       <LayoutView Layout="@typeof(MainLayout)">
           <p>Sorry, there's nothing at this address.</p>
       </LayoutView>
   </NotFound>

</Router>

• <Found>: This template is rendered when a route matches the current URL.
• <NotFound>: This template is rendered when no route matches the current URL, displaying a "Not Found" message.

 

 

NavLink component: Blazor also supports client-side navigation, allowing users to navigate between routes without triggering a full page reload.  Using the NavLink component or programmatic calls to navigation functions helps one to achieve this. This component renders an anchor tag (<a>) and automatically applies CSS classes (nav-link and active) when the link's href matches the current URL. This is useful for creating navigation menus. 

<div class="nav-item px-3">
   <NavLink class="nav-link" href="/" Match="NavLinkMatch.All">
       <span class="oi oi-home" aria-hidden="true"></span> Home
   </NavLink>
</div>

<div class="nav-item px-3">
   <NavLink class="nav-link" href="/counter">
       <span class="oi oi-plus" aria-hidden="true"></span> Counter
   </NavLink>
</div>

<div class="nav-item px-3">
   <NavLink class="nav-link" href="/user/5">
       <span class="oi oi-person" aria-hidden="true"></span> User Profile (ID 5)
   </NavLink>
</div>