Blazor WASM has a built-in client-side router. Routes are defined on components using the @page directive. The router intercepts navigation and renders the matching component without a full page reload.

Defining Routes

@page "/products"
@page "/shop"  // multiple routes for same component

<h1>Products</h1>

Route Parameters

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

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

Programmatic Navigation

@inject NavigationManager Nav

Nav.NavigateTo("/products");

NavLink Component

Use <NavLink> instead of <a> — it automatically adds the active CSS class when the route matches:

<NavLink href="/products" Match="NavLinkMatch.All">Products</NavLink>

404 Handling

Add a catch-all route in App.razor using the <NotFound> template inside the Router component.

Reference:

Wikipedia: Single-Page Application

https://en.wikipedia.org/wiki/Single-page_application