Blazor Routing Guide: Components, Parameters, and Navigation

Are your Blazor routes really doing what you expect? Many developers overlook the subtle power of routing in Blazor until things break—or worse, users get lost in your app. Let’s walk through how to master routing and the NavigationManager so your app always knows where it’s going (and how to get there).

Introduction to Blazor Routing and Navigation

Blazor uses a powerful routing system that mirrors client-side frameworks like Angular and React, but with a C# twist. Routing in Blazor enables you to define URL patterns and map them to components seamlessly.

The backbone of routing in Blazor WebAssembly or Blazor Server is the Router component. It parses the browser URL and renders the matching component. Navigation, on the other hand, is handled programmatically through the NavigationManager.

• Blazor Router: Matches the route template in the URL.
• NavigationManager: Allows code-based redirection.

Configuring the Router Component

By default, Blazor sets up the Router in App.razor. Here’s what that typically looks like:

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

Explanation:

• AppAssembly tells the router where to find routable components.
• Found and NotFound define behavior for matched/unmatched routes.
• RouteView renders the matched component.
• DefaultLayout is optional but lets you wrap pages consistently.

You define routes in your components using the @page directive:

@page "/dashboard"
<h3>Dashboard</h3>

Handling Parameters and Query Strings

You can pass values via the URL in two ways:

Route Parameters

@page "/user/{id:int}"
<p>User ID: @Id</p>
@code {
  [Parameter] public int Id { get; set; }
}

• This example binds the route /user/5 to Id = 5.

Query Strings

Blazor doesn’t support query strings natively like route parameters. Use NavigationManager + Microsoft.AspNetCore.WebUtilities:

@inject NavigationManager NavManager

@code {
  protected override void OnInitialized()
  {
    var uri = NavManager.ToAbsoluteUri(NavManager.Uri);
    var query = QueryHelpers.ParseQuery(uri.Query);
    if (query.TryGetValue("filter", out var filter))
    {
      Console.WriteLine($"Filter: {filter}");
    }
  }
}

Tip: Use query strings for optional or filter-based parameters.

Navigation Guards and Route Constraints

Navigation Guards

Blazor doesn’t have built-in route guards like Angular. But you can mimic this with layout-level logic or by checking conditions in OnInitializedAsync:

@code {
  protected override async Task OnInitializedAsync()
  {
    if (!userIsAuthenticated)
    {
      NavManager.NavigateTo("/login");
    }
  }
}

Route Constraints

Apply constraints directly in the route template:

@page "/order/{orderId:int}"

Common constraints include:

• int, long, bool, datetime, guid
• Custom constraints are possible via IRouteConstraint (advanced).

FAQ: Common Questions About Blazor Routing

Conclusion: Make Your Routes Work for You

Routing in Blazor is more than just connecting URLs—it’s a key part of crafting seamless, professional web apps. By mastering Router, NavigationManager, parameters, and guards, you ensure your app provides a polished user experience.

So next time you’re wiring up a route, ask yourself: “Is this the smoothest experience I can offer my user?” If not, now you know how to fix it.