Routing and parameterized route

The browser accesses your website through URL. Blazor Server serves the destination page based on the requested URL. Sometimes, the users want more, like they can share a URL with pre-filled information. In that case, routing and parameterized route will help you. This tutorial includes:

• 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 will make your website available to the users. Routing is the process of specify a component to serve when a specific URL is requested.

Parameterized route is the process of setting and getting parameters on a route to allow the users to share the URL with pre-filled information. There are 2 types of parameters:

1. Path parameter.
2. Query parameter.

Routing

A URL is a route, a route must be specified in one and only one component. Whereas, a component can have multiple routes. The following image will illustrate the relationship between a route and a component.

Specify a route for component

An independent component is a component with at least one route. To specify a route for a component, you need to use the @page directive at the directive section of the component. For example:

@page "/single-route"

A route must begin with an forward splash (/).

Nested route

A route must be unique throughout the website. However, a route can be nested in another route. A nested route is a route that has the same beginning path with the parent. Consider the following example:

/member
/member/dashboard
/member/profile

In the example, /member is the parent route with 2 children: /member/dashboard and member/profile.

Parameter data types

A route can contain parameter(s). All the parameters in the route will be mapped to a component property. The following list is the accepted types of a component property.

1. bool.
2. System.DateTime.
3. decimal.
4. float.
5. System.Guid.
6. int, System.Int32.
7. long. System.Int64.
8. double, System.Double.
9. string, System.String.

short and System.Int16 are not supported.

Path parameters

Path parameters is the technique that takes parameters as a part of route path. Each parameter separated by a forward splash (/) and wrapped inside a pair of brackets ({}). For example, the route /member/{id:guid} has id as a parameter.

Characteristics

• Can have one and only one optional parameter. The optional parameter must be placed at the last parameter.
• Blazor Server will prioritize a route over a path parameter route. See Route overloading section below.
• Must specify the type of the parameter in route. The route parameter type must match with the component parameter type.
• Parameter identifier much be the same in the route and in the component.

Route parameter type

Route parameter type is the type specific for one parameter. The following image illustrates the route and component parameter relationship:

The following table shows the matching type 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, you need to declare a component property in the code section with getter, setter and has a [Parameter] attribute. For example:

@page "/path-parameters-overloading/{Param1}"

<h3>Overloading path with param: @Param1</h3>

@code {
    [Parameter]
    public string Param1 { get; set; } = "";
}

Optional parameter

Path parameter can have one and only one optional parameter. The optional parameter must be placed as the last parameter in the route. The route parameter type and component parameter type must have a question mark (?) symbol at the end. For example:

@page "/optional-path-parameter/{Param1:bool?}"

<h3>OptionalPathParameter</h3>
<div>Param1 has value? - @Param1.HasValue</div>

@code {
    [Parameter]
    public bool? Param1 { get; set; }
}

Route overloading

When your parameterized route has the same path with your nested route, it is called route overloading. Assuming you have 2 routes: /path-parameters-overloading/{Param1} and /path-parameters-overloading/page-without-param. Then a user requests /path-parameters-overloading/page-without-param, there are 2 possible route matches: /path-parameters-overloading/{Param1} and /path-parameters-overloading/page-without-param. In this case, Blazor Server will prioritize the route (/path-parameters-overloading/page-without-param) over the path parameter route (/path-parameters-overloading/{Param1}).

Query parameter

Characteristic

Query parameter technique has the following characteristic:

• Can have multiple optional parameters.
• Route parameter identifier can be different to component parameter.
• Do not need to declare the parameter beforehand.

Access the query parameters

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

@page "/query-parameters"

<div>Param1: @Param1</div>

@code {
    [SupplyParameterFromQuery]
    [Parameter]
    public bool Param1 { get; set; }
}

In case of the requested URL does not contain the parameter, Blazor Server will assume the value of that parameter as the value of default keyword of the respective type.