ページ遷移 ― NavLink と NavigationManager

導入

ページを分けたら、次は行き来する手段です。ふつうの<a>でもよいのですが、Blazorには「今いるページのリンクを強調表示してくれる」<NavLink>があります。コードから移動したいときはNavigationManagerを使います。

説明

<NavLink>は<a>の強化版。hrefが現在のURLと一致すると自動でactiveクラスが付きます。

<nav>
    <NavLink href="" Match="NavLinkMatch.All">ホーム</NavLink>
    <NavLink href="counter">カウンター</NavLink>
    <NavLink href="about">このサイトについて</NavLink>
</nav>

コードから移動するには、NavigationManagerを注入してNavigateToします。

@inject NavigationManager Nav

<button @onclick="GoHome">ホームへ戻る</button>

@code {
    private void GoHome() => Nav.NavigateTo("/");
}

• <NavLink>は現在URLと一致するとactiveが付く（メニューの「現在地」表示が楽）
• Match="NavLinkMatch.All"はURL全体一致（/のリンクが常に active になるのを防ぐ定番）
• コードからの遷移はNavigationManager.NavigateTo("/path")
• ページ全体を読み込み直さず、必要な部分だけ差し替わる（SPA的な速い遷移）

まとめ

• リンクは<NavLink>（現在地を自動で強調）
• コードからの移動はNavigationManager.NavigateTo
• ページ全体の再読み込みなしに素早く遷移する

次回: URLの一部を値として受け取るルートパラメータです。