---
title: "Blazor Routing: An Overview"
published_at: "2022-07-06T10:00:20+00:00"
modified_at: "2026-02-10T09:19:00+00:00"
url: "https://www.syncfusion.com/blogs/post/blazor-routing-an-overview"
excerpt: "Routing is a pattern-matching process that observes incoming client requests and decides what to do with each request. It refers to how we set up navigation and handle the application URL. Like other SPA frameworks, Blazor has a router that..."
taxonomy_category:
- "Blazor"
- "C#"
- "Development"
- "Web"
taxonomy_post_tag:
- "Blazor"
- "development"
- "Routing"
- "Web"
- "WebAssembly"
---
# Blazor Routing: An Overview
[Bhagya Vithana](https://www.syncfusion.com/blogs/author/bhagya-vitana)
Routing is a pattern-matching process that observes incoming client requests and decides what to do with each request. It refers to how we set up navigation and handle the application URL.
Like other SPA frameworks, Blazor has a router that manages virtual navigation. In addition, the Blazor server and WebAssembly apps allow routing with the help of various built-in components and services. So, in this article, I’ll go over all you need to know about routing in Blazor apps.
## Router component in Blazor
Routing exists in Blazor to ensure that each request is directed to the best component with all the data necessary to display exactly what the user wants.
The [Router component](https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.routing.router?view=aspnetcore-6.0)
is used as a part of the **App** component in Blazor apps. The default implementation looks like this.
```
Routing in Blazor Application.
```
The **AppAssembly** defines which components to load for a given route. Looking at the code, we can spot two scenarios handled by ** Found** and ** NotFound** parameters, respectively:
- The component with the given route is found.
- The component with the given route is not found.
In the first case, when the component with the given route is found, the app will use the **Found** segment. After that, the ** RouteView** component does all the magic for us. It receives the route data from the Router component, along with any parameters, and renders the required component together with its layout. It will use the default layout if the component doesn’t have a layout. We can set the default layout with the ** DefaultLayout** property in the ** RouteView** component.
In the second case, when the component with the given route is not found, the app will use the **NotFound** template. By default, it shows the ** p** tag located within the ** LayoutView** component, with a simple message informing the user that the desired page was not found. The ** LayoutView** ensures that the specific layout gets rendered for the not found route. We can control which layout will be used by setting the ** Layout** property of the component.
## @page directive in Blazor routing
Routing rules are essential in Blazor routing since they let us define the exact component that should appear for a specified URL. We can set up these rules using the **@page** directive followed by the route itself.
For example, a component with the following declared code will load using the Router component if we make a request for **example.com/profile**.
```
@page "/profile"
```
You can also define multiple route templates using multiple **@page** directives like in the following example. These routes should start with the **/** sign. Otherwise, the app will report an error.
```
@page "/profile"
@page "/myprofile"
```
If we navigate to the route **(/profile)**, the given route will be matched by the Router component. Then, the ** profile.razor** page component will be rendered.
These components have a particular folder within our app folder structures, usually the **Pages** folder. The assembly will be scanned at the app startup to find any components with the **@page** directive applied.
## Route parameters and constraints
It is common to use the route parameters to pass data from one page to another. After defining the Router component, it can automatically populate the corresponding component property with the same name since they are case insensitive.
For example, we should define the route parameter**salary** in the following code segment (wrapped with curly braces {}) and a related property that must match the route parameter’s value, **@countsalary**. It can automatically populate the value of the route parameter.
```
@page "/profile/{salary}"
@Salary
monthly salary: @countSalary
@code {
private int countSalary = 50000;
[Parameter]
public string Salary { get; set; }
private void IncrementSalary(){
countSalary ++;
}
}
```
Then, you can run the app and enter any string in the address bar after **/salary/** to see the route parameter value displayed.
```
monthly salary: 50000
```
Moreover, it is also possible to limit the salary parameter to accept only integer values.
```
@page "/profile/{salary:int}"
...
@code {
[Parameter]
public string Salary { get; set; }
}
```
## Handling navigation
The **NavLink** component and the ** NavigationManage**r class are the two techniques for navigating among pages.
### Navigation manager
In the C# code, we can use the **NavigationManager** class to manage URIs and navigation. It has the following properties, methods, and events:
- **Properties**: BaseUri, Uri
- **Methods**: NavigateTo, ToAbsoluteUri, ToBaseRelativePath
- **Events**: LocationChanged
Let’s see their work using the following example. You can create a new Blazor component and inject the **NavigationManager** service using the **@inject** directive.
```
@page "/profile"
@inject NavigationManager nvm