Routing og SPA

Læringsmål

• Definere routes med @page og flere stier per komponent.
• Bruge NavLink til aktiv markering i NavMenu.
• Læse query parameters (?name=pikachu) med [SupplyParameterFromQuery].
• Forklare deep linking og fordele/ulemper ved SPA.

Hvornår bruger I routing? Så snart appen har mere end én «skærm» — Pokémon-liste, LoL, indstillinger, login — uden at brugeren skal gennemleve fuld page reload og tabe Blazor-circuit.

En SPA loader shell én gang. Blazor router matcher URL til komponent, skifter indhold i @Body, bevarer layout og DI-scope (afhængigt af hosting).

@page "/pokemon"
@page "/dex"
@layout MainLayout

<PageTitle>Pokédex</PageTitle>
<h1>Pokémon</h1>

NavLink

<NavLink class="nav-link" href="pokemon" Match="NavLinkMatch.Prefix">
  Pokémon
</NavLink>
<NavLink class="nav-link" href="lol">
  LoL
</NavLink>

Match="All" (default) kræver præcis path; Prefix matcher understier.

Hvornår NavLink? Al intern navigation i MainLayout — demo-hub, teori, jeres egne @page-ruter. Eksterne links (Mercantec Auth, katalog på andet domæne) forbliver almindelige <a target="_blank"> med rel="noreferrer" hvor relevant.

Query parameters

@page "/soeg"

<p>Søger efter: @name</p>

@code {
  [SupplyParameterFromQuery]
  public string? Name { get; set; }

  protected override async Task OnParametersSetAsync()
  {
    if (!string.IsNullOrWhiteSpace(Name))
      await SearchAsync(Name);
  }
}

URL /soeg?name=charizard kan bookmarkes og deles — god UX til API-søgning.

Hvornår query frem for route? Valgfri filtre (søgning, sortering, side) der ikke definerer «hvilken entitet» — fx /pokemon?name=pika. Obligatorisk id i path: /pokemon/25 er tydeligere deep link end kun query.

// Opdatér query uden fuld reload
_nav.NavigateTo($"/soeg?name={Uri.EscapeDataString(filter)}");

Route parameters

@page "/pokemon/{id:int}"

<h1>Detail #@Id</h1>

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

Hvornår route constraints? {id:int} afviser ikke-numeriske URLs tidligt — undgår unødige API-kald med NaN. LoL champion-id som string: {slug} uden int-constraint.

Layouts

MainLayout.razor indeholder fælles chrome; sider sætter @layout eller arver default fra Routes.razor.

NotFound: I Routes.razor eller router-konfiguration — vis venlig 404-side når ingen @page matcher (fx bruger skriver /pokmon). Link tilbage til forsiden; log ikke staktrace i UI.

<Router AppAssembly="typeof(Program).Assembly" NotFound="typeof(Pages.NotFound)">
  ...
</Router>

Fordele SPA: hurtig navigation, genbrug af services/state, én codebase.
Ulemper: større initial load (især WASM), SEO kræver plan, auth tokens håndteres i klient.

Hvorfor det betyder noget: SPA-routing holder Mercantec Auth state og HttpClient alive — fuld page reload mister session.

Baseret på MAGS Blazor-wiki og Microsoft Learn — Blazor.