Evaluating Blazor Router

By Endy Tjahjono. Last update 01 Jun 2021.

Here is my brain dump when reviewing Blazor WebAssembly’s router using the features of more established routers like UI-Router and Vue Router.

Where to define route

Inside component / razor pages, using @page directive. Example:

@page "/product"

Be careful of two components handling the same route.

Avoid route path with dot.

Hash based routing

Meaning: http://localhost/#/product instead of http://localhost/product.

Not available.

Route parameter / dynamic route

In URL path:

@page "/product/{ProductID:int}"

<h1>Product @ProductID</h1>

@code {
    public int ProductID { get; set; }

Optional parameter is not supported.

There is a OnParametersSetAsync event to detect parameter change.

No built-in support for parameters in query string. Need to parse yourself during NavigationManager.LocationChanged (not async!). A helper is available in Microsoft.AspNetCore.WebUtilities.QueryHelpers.ParseQuery.


<NavLink href="product" Match="NavLinkMatch.Prefix">Product</NavLink>

How to create link with route parameter? Concatenate them yourself :)

<NavLink href=@($"product/{4}")>Product 4</NavLink>

Path construction relies on the <base href="/"> tag in wwwroot/index.html.

Programmatically go to a different URL


@inject NavigationManager NM

<button @onclick="GoTo4">Go</button>

@code {
    private void GoTo4()

Some helpers available in NavigationManager: Uri, BaseUri, ToAbsoluteUri, ToBaseRelativePath.

Handling not found

NotFound tag inside Router tag inside App.razor file

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

Catch-all route

@page "/product/{*astringvar}"

@code {
    public string astringvar { get; set; }

Route redirect

Manually call NavigateTo within OnInitialized:

@page "/"
@inject NavigationManager NM

@code {
    protected override void OnInitialized()

To prevent user refreshing the browser, changing the browser url, pressing link when there is unsaved change, etc.

No built-in support.

Named route

None. Probably in the future.

Nested route

Nope. Flat routes.

Just NavigationManager.LocationChanged?

There is no oncomplete onabort beforeRouteEnter beforeRouteUpdate.

Replace url in place / changing URL without changing state


I haven’t checked

  1. history back / forward
  2. composite route / named view
  3. route alias
  4. decouple component from route
  5. route meta data
  6. transition
  7. scrolling after navigating
  8. lazy loading routes

comments powered by Disqus