Introduction
 
A Route is a URL pattern and Routing is a pattern matching process that monitors the requests and determines what to do with each request.
 
Blazor provides a client-side router. As compared with an Angular router, it has some limited features. The Microsoft.AspNetCore.Blazor.Routing.Router class provides Routing in Blazor. At the time of initialization, Blazor needs the assembly that contains the routing, i.e., using the following code. The router is configured in Blazor applications. It is configured in App.cshtml file.
  1. <Router AppAssembly=typeof(Program).Assembly />  
Internally, Blazor's router finds all the classes that implement Microsoft.AspNetCore.Blazor.Components.IComponent interface in the specified in the above code.
 
@page Attribute/directive
 
There is only one way to define the routing in Blazor - using @page directive. In MVC applications, we can define routing using multiple ways such as Routing attribute and adding value to the router table. Each component in Blazor must specify route template using @page directive. The @page directives are internally converted into RouteAttribute when template is compiled.
 
Example
  1. @page "/testRoute"  
  2. <h2>Test App</h2>  
In Blazor, Component can have multiple routes. If we require that component can render from multiple route values, we need to define all routes with multiple @page directives.
 
Example
  1. @page "/testPage"  
  2. @page "/otherPage"  
  3. <h2>Test App</h2>  
If our component has no template; i.e. component is written in pure C# class, we can define routing using RouteAttribute.
 
Example
  1. using Microsoft.AspNetCore.Blazor.Components;  
  2. using System;  
  3.   
  4. namespace BlazorDemoApp  
  5. {  
  6.     [Route("/test3")]  
  7.     public class Class : IComponent  
  8.     {  
  9.         public void Init(RenderHandle renderHandle)  
  10.         {  
  11.             throw new NotImplementedException();  
  12.         }  
  13.   
  14.         public void SetParameters(ParameterCollection parameters)  
  15.         {  
  16.             throw new NotImplementedException();  
  17.         }  
  18.     }  
  19. }  
Alternatively, we can inherit class from BlazorComponent class to create component using C# code
  1. public class MyClass : BlazorComponent  
  2. {  
  3.          
  4. }  
Handle Parameter in Route Template
 
Route may have parameter. The parameters can be defined using curly braces within routing template in both @page directive or RouteAttribute.
 
Example
  1. @page "/testRoute/{Parameter1}"  
  2.   
  3. @functions {
  4.     [Parameter]
  5.     string Parameter1 { getset; }  
  6. }  
In Blazor, the parameters are directly assigned to properties of the component. The parameter name must match with the name of the property on the component and decorate with Parameter attribute. Same as in ASP.net MVC, we can also define parameter constraints by placing a constraint name after the parameter name separated by a colon. Using parameter constraints, we can bind specific type to the parameter value.
 
Example
  1. @page "/constrains/{Parameter1:int}"  
  2. @functions {  
  3.     [Parameter]
  4.     int Parameter1 { getset; }  
  5. }  
So, if someone tried to navigate to this component with string parameter value then the router would not able to match the route hence it will throw the exception.
 
 
 
Linking Pages
 
We can define links as HTML anchor tags. There are two ways to link pages in Blazor.
  • Using Anchor - We normally use this in HTML
  • Using NavLink - This is introduced in Blazor
Example
  1. <a href="/example1">Navigation Using Anchor tag</a><br />  
  2. <NavLink href="/example2">Navigation Using NavLink</NavLink><br />  
Blazor introduced NavLink tag helper. It is an alternative of HTML anchor tag. It sets the active CSS class automatically if the href matches the current URL.
 
Programmatically navigate one component to another component
 
We can also navigate from one component to another component by using IUriHelper. This helper has many methods. Using "NavigateTo" method, we can navigate from one component to another. In order to use it, we need to inject services of IUriHelper to our component. We can inject the service using @inject directive in the cshtml file or using inject attribute in C# code.
 
Example
  1. @using Microsoft.AspNetCore.Blazor.Services;  
  2.   
  3. @inject IUriHelper UriHelper  
  4.   
  5. <h3>Routing Test</h3>  
  6.   
  7. <button onclick=@ButtonClicked>Programatically Change Routing</button>  
  8.   
  9. @functions {  
  10.     void ButtonClicked()  
  11.     {  
  12.         UriHelper.NavigateTo("example3");  
  13.     }  
  14. }  
 C# only Component
  1. using Microsoft.AspNetCore.Blazor.Components;  
  2. using Microsoft.AspNetCore.Blazor.Services;  
  3. using System;  
  4.   
  5. namespace BlazorDemoApp  
  6. {  
  7.     [Route("/test3/{parameter1}")]  
  8.     public class MyClass : BlazorComponent  
  9.     {  
  10.         [Inject]  
  11.         public IUriHelper UriHelper { getset; }  
  12.         public void Init(RenderHandle renderHandle)  
  13.         {  
  14.             throw new NotImplementedException();  
  15.         }  
  16.     }  
  17. }  
Accessing Query Parameters
 
A most common method used to pass data from UI to code behind or service is Query String or Query Parameter. We can add query parameter using IUriHelper service. To access query parameter, we require installing the "Microsoft.AspNetCore.WebUtilities" package from NuGet. Using the following command and NuGet Package Manager, we can install said NuGet package in our project.
  1. PM> Install-Package Microsoft.AspNetCore.WebUtilities -Version 2.0.3   
Using QueryHelpers.ParseQuery.TryGetValue method we can access the query parameter.
 
Example
  1. @page "/accessQueryParameter"  
  2. @using Microsoft.AspNetCore.Blazor.Services;  
  3.   
  4. @inject IUriHelper UriHelper  
  5.   
  6. <h3>Accessing Query Parameter</h3>  
  7.   
  8. <p>  
  9.     Parameter Value: @Name  
  10. </p>  
  11.   
  12.   
  13. @functions {  
  14.   
  15.   
  16.    private string Name { getset; }  
  17.   
  18.     protected override void OnInit()  
  19.     {  
  20.         GetName();  
  21.         UriHelper.OnLocationChanged += OnLocationChanges;  
  22.     }  
  23.   
  24.     private void OnLocationChanges(object sender, string location) => GetName();  
  25.   
  26.     private void GetName()  
  27.     {  
  28.         var uri = new Uri(UriHelper.GetAbsoluteUri());  
  29.         Name = Microsoft.AspNetCore.WebUtilities.QueryHelpers.ParseQuery(uri.Query).TryGetValue("name"out var type) ? type.First() : "";  
  30.         StateHasChanged();  
  31.     }  
  32.   
  33.     public void Dispose()  
  34.     {  
  35.         UriHelper.OnLocationChanged -= OnLocationChanges;  
  36.     }  
  37. }  
Output

 
 
Summary

Blazor provides a client-side router. As compared with an Angular router, it has some limited features. Currently, it provides almost all the features that we require while developing an application.

You can view or download the source code from the GitHub link here.