How do I pass data in routing in Blazor?

Data is passed using ASP.NET Core Endpoint Routing for Blazor server applications. Using MapBlazorHub endpoint routing extension method, ASP.NET Core will start accepting the incoming link for Blazor component.

The route uses the parameter (page name) to navigate to the corresponding components.

In the following code example, you get the dropdown value and pass the parameter to navigate the page and the full details of the employee is displayed based on the employee’s value.

@inject NavigationManager UriHelper

<select @onchange="@onChange">
    <option></option>
    <option value=1>Andrew Fuller</option>
    <option value=2>Anne Dodsworth</option>
    <option value=3>Janet Leverling</option>
</select>

@code {
    private void onChange(Microsoft.AspNetCore.Components.ChangeEventArgs args)
    {
        UriHelper.NavigateTo("employeeDetails/" + args.Value);
    }
}

[EmployeeDetails.razor]

@page "/employeeDetails/{Id:int}"

@if (empData != null)
{
<div class="container">
    <div class="row details">
        <div>
            <label><b>Employee Id: </b></label>
            <span>@empData.Eid</span>
        </div>
        <div>
            <label><b>Employee Name: </b></label>
            <span>@empData.FirstName</span>
        </div>
        <div>
            <label><b>Designation: </b></label>
            <span>@empData.Designation</span>
        </div>
    </div>
</div>
}

<style>
    .details {
        display: block;
    }
</style>

@code {

    [Parameter]
    public int Id { get; set; }

    private EmployeeData empData { get; set; }

    protected override void OnInitialized()
    {
        empData = employeeData.Where(i => i.Eid.Equals(Id)).FirstOrDefault();
    }
    public class EmployeeData
        {
            public string FirstName { get; set; }
            public string Designation { get; set; }
            public int Eid { get; set; }
        }
        List<EmployeeData> employeeData = new List<EmployeeData>
        {
            new EmployeeData() { FirstName = "Andrew Fuller",  Designation = "Team Lead", Eid= 1 },
            new EmployeeData() { FirstName = "Anne Dodsworth", Designation = "Developer", Eid= 2 },
            new EmployeeData() { FirstName = "Janet Leverling", Designation = "HR", Eid= 3 },
        };
}