Routing

✅ Similar to Blazor Server

Routing in Blazor is a mechanism for mapping URLs to specific components, which are used to display the content of a client-side web application. When a user navigates to a specific URL, the Blazor router uses the route template to match the URL to a component, which is then rendered in the browser. In this tutorial, you are going to learn different scenario of routing including the definition of routing and parameterized routed.

• What is routing and parameterized route?
• Routing.
• Parameter data types.
• Path parameters.
• Query parameters.

You can download the example code used in this topic on GitHub.

What is routing and parameterized route?

Routing is an essential feature of web development that allows users to navigate through your website. It is the process of specifying which component to serve when a specific URL is requested.

Parameterized routing is a technique that allows you to pass data through the URL. This allows users to share URLs with pre-filled information, such as search queries or user IDs. There are two types of parameters:

• Path parameters: These are included as segments in the URL, such as /users/{userId}.
• Query parameters: These are included as key-value pairs in the URL, such as /users?id=5.

With path parameters, the data is included in the URL's structure, and with query parameters, the data is passed as part of the URL's query string.

Routing

In Blazor, a route is a specific URL that maps to a component. Each route must be associated with one and only one component, which is responsible for handling and displaying the content when that URL is requested.

On the other hand, a component can have multiple routes associated with it. This means that different URLs can lead to the same component, with the component displaying different content based on the route.

The relationship between a route and a component can be visualized as follows:

• A route is a unique URL that maps to a specific component.
• A component is responsible for handling and displaying the content for one or multiple routes.

Specify a route for component

An independent component in Blazor is a self-contained unit that can be navigated to directly via its unique route. To specify a route for a component, developers can use the @page directive at the top of the component. This directive tells the framework that the component should be associated with a specific URL path. Routes must start with a forward slash (/) and can include dynamic segments, query parameters, and more. For example, the following code specifies a route for a component called "About":

@page "/about"
<h3>About Us</h3>

This code specifies that when the user navigates to the "/about" URL path, the "About" component will be displayed.

Nested route

It's important to note that routes must be unique across the entire web application. However, routes can be nested within other routes, allowing for the creation of hierarchical navigation structures. A nested route is a route that shares the same initial path as its parent route.

For example, consider a website with a "Member" area that has a dashboard and a profile page. The routes for this website might be set up as follows:

@page "/member"
<h1>Member Area</h1>

@page "/member/dashboard"
<h1>Dashboard</h1>

@page "/member/profile"
<h1>Profile</h1>

In this example, the "/member" route is the parent route and the "/member/dashboard" and "/member/profile" routes are nested routes. The user will see the "Member Area" component when they first navigate to the "/member" route. If they then click on the "Dashboard" link, they will see the "Dashboard" component and the URL will update to "/member/dashboard". Similarly, if they click on the "Profile" link, they will see the "Profile" component and the URL will update to "/member/profile".

It's important to note that the routes must be unique. In the example, the routes "/member", "/member/dashboard" and "/member/profile" are unique and can be used to navigate to the corresponding components.

Parameter data types

Routes in Blazor can include parameters, which are mapped to properties of the component associated with the route. These parameters allow the component to receive data from the URL and use it to display dynamic content.

It's important to note that only certain types of properties can be used to receive route parameters. The following types are supported:

• bool
• System.DateTime
• decimal
• float
• System.Guid
• int, System.Int32
• long, System.Int64
• double, System.Double
• string, System.String

It's worth noting that short and System.Int16 are not supported as types for component properties that receive route parameters.

For example, consider the following route:

@page "/product/{productId:int}/{productName}"

<h1>Product Details</h1>

In this example, the component associated with the route has two properties, productId and productName, that receive the values from the parameters in the route. The productId parameter is of type int and the productName parameter is of type string.

It's also worth noting that, the parameter type specified in the route must match the component property type.

Path parameters

Path parameters in Blazor are a technique for passing parameters as part of a route path. Each parameter is separated by a forward slash (/) and is wrapped in a pair of brackets ({}). For example, the route /member/{id:guid} has an id parameter.

Path parameters have the following characteristics:

• Only one optional parameter is allowed and it must be placed at the end of the parameters.
• Blazor prioritizes routes over path parameter routes.
• The type of the parameter in the route must match the type of the parameter in the component.
• The parameter identifier must be the same in the route and the component.

The route parameter type specifies the type for a specific parameter. The relationship between the route and component parameters is illustrated in the image.

The table below illustrates the matching types between route parameter and component parameter:

The float and double data cannot contain the e symbol. For example: -1,001.01e8 is not valid.

Access the path parameters

To access a route parameter in Blazor, you need to declare a component property with a getter and setter and include the [Parameter] attribute. For example:

@page "/member/{id:guid}"

<h1>Member Information</h1>
<p>Id: @Id</p>

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

Optional parameter

Path parameters in Blazor can have one optional parameter and it must be placed at the end of the route. To indicate that a route parameter is optional, the route parameter type and component parameter type must have a question mark (?) symbol at the end. For example:

@page "/member/{id:guid}/{name?}"

<h1>Member Information</h1>
<p>Id: @Id</p>
<p>Name: @Name</p>

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

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

Route overloading

When a parameterized route has the same path as a nested route, it is referred to as "route overloading."

For example, assuming you have two routes: /member/{id:guid} and /member/page-without-param. When a user requests the URL /member/page-without-param, there are two possible route matches: /member/{id:guid} and /member/page-without-param. In this case, Blazor will prioritize the route /member/page-without-param over the path parameter route /member/{id:guid}.

It is important to note that, in this scenario, the route without parameters will always take precedence over the route with parameters, even if the parameter is optional. This is because the framework will always try to match the most specific route possible.

To make the code easier to maintain, it's recommended to keep your routes as specific as possible and make sure to distinguish routes with and without parameters in their path.

Query parameters

Query parameters is a technique that provides flexibility by allowing you to easily add or remove parameters without affecting other routes. The first parameter comes after the question mark (?) symbol and each subsequent parameter comes after the ampersand (&) symbol. For example, the route /member?id=123&valid=true has id and valid as parameters.

Query parameters have the following characteristics:

• Can have multiple optional parameters.
• The parameter identifier in the route does not have to match the parameter identifier in the component.
• Parameters do not need to be declared beforehand.

To access a query parameter, you need to declare a component property with a getter, setter, and the [Parameter] and [SupplyParameterFromQuery] attributes. For example:

@page "/member"
<h1>Member Information</h1>
<p>Id: @Id</p>
<p>Is Valid: @IsValid</p>

@code {
    [Parameter]
    [SupplyParameterFromQuery("id")]
    public string Id { get; set; }

    [Parameter]
    [SupplyParameterFromQuery("valid")]
    public bool IsValid { get; set; }
}

If a requested URL does not contain a query parameter, Blazor will assume the value of that parameter to be the default value of its respective data type. For example, if the requested URL is /member and the component is expecting a query parameter "valid" of type bool, the default value of false will be assigned to the valid parameter.

This behaviour can be useful when you want to use a default value for a parameter when it is not present in the URL. However, if you want to handle the case when the parameter is not present in the URL, you can add a null check or use a nullable type such as bool? and check if it has a value or not.

It's important to note that when you use the default value, it will not differentiate between an optional parameter and a missing parameter, so it's recommended to use nullable types for handling missing parameters.