Hello! Today I want to tell you how routing works in Blazor Server. Routing starts in the Startup.cs file. The following code will responsible for it


    app.UseEndpoints(endpoints =>

app.UseRouting(); came from asp.net and adds route matching to the middleware pipeline. This middleware looks at the set of endpoints defined in the app, and selects the best match based on the request. app.UseEndpoints() adds endpoint execution to the middleware pipeline. It runs the delegate associated with the selected endpoint. In the middle of app.UseEndpoints() indicates endpoints.MapBlazorHub() here is set up SignalR routing. Setup is done automatically and you do not need to change anything here. The next element is endpoints.MapFallbackToPage("/_ Host") a backup route, it has the lowest priority, called in the case that no other more suitable routes are found. The parameters for MapFallbackToPage specify /_Host. This is the file to which it will be redirected. This file is located under Pages folder _Host.cshtml. It looks like regular html with some differences. The beginning of the file is indicated

@page "/"
@namespace BlazorLearn.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
    Layout = null;

@page "/" indicate that this file will be opened if the url is accessed /

The body renders the pages

        <component type="typeof(App)" render-mode="ServerPrerendered" />

Here it is specified that we render and in what mode. ServerPrerendered renders first on the server and then displays to the client. App points to another App.razor file. This file determines which layout to display. If routeData exists corresponding page displayed, if this page has no layout then MainLayout will be used. If routeData does not exist then MainLayout and the text Sorry, there's nothing at this address.

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>

In the blazor server project there are several pages created initially. These are Counter, FetchData and Index. Each of them has a @page directive at the beginning. For counter it will be @page "/counter" for FetchData it will be @page "/fetchdata" and for Index @page "/". So if you open any of these endpoints in the browser, the corresponding page will be opened. Multiple @page values ​​can be specified for a single page. For example for Counter you can add

@page "/counter"
@page "/count"

And now the Counter page will open for both urls. Count

You can also pass an initial value to Counter. Now when the pages are open it is always zero. To do this, add another @page that will look like @page "/counter/{InitialValue: int}" you can also add the same for count page. InitialValue will be a public parameter of type int. This will allow you to specify localhost:5001/counter/123 in the url and counter will start from value 123. Next you need to write the code that will set this value. In the @code section you need to add a parameter with the same name public int InitialValue {get; set; } this parameter must have the attribute [Parameter]. In order to pass the value of InitialValue your need to call the method OnParametersSet.

@page "/counter"
@page "/count"
@page "/counter/{InitialValue:int}"
@page "/count/{InitialValue:int}"


<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    public int InitialValue {get; set; }
    private int currentCount = 0;

    protected override void OnParametersSet()
        currentCount = InitialValue;

    private void IncrementCount()

And the result will be as follows Result

This post is based on a course from Tim Corey - Blazor Server: In Depth