Blazorのナビゲーションリンクと画面遷移｜ASP.NET×Blazor入門 5.3

5.3 ナビゲーションリンクと遷移

Blazorでは、SPA（Single Page Application）として、JavaScriptを使わずに高速かつ滑らかな画面遷移が可能です。 このセクションでは、ユーザーがクリックしてページを移動するための基本要素である <NavLink> コンポーネントや NavigationManager の使い方を学びます。

<NavLink> コンポーネント

ナビゲーションリンクを作るには、HTMLの <a> タグではなく、 Blazor専用の <NavLink> を使います。 現在のURLと一致しているかどうかに応じて、自動的に active クラスが付与されます。

<NavLink href="/dashboard" class="nav-link" activeClass="active">
    ダッシュボード
</NavLink>

上記のように記述すると、URLが /dashboard の時に自動で active クラスが付与され、 見た目を変えることができます。class と activeClass を組み合わせてスタイリングしましょう。

NavigationManagerによるコードからの遷移

ボタンのクリックやフォームの送信後に画面遷移したいときは、NavigationManager を使います。 DI（依存性注入）で取得して、コードから任意のURLへ移動させます。

@inject NavigationManager Navigation

<button @onclick="GoToProfile">プロフィールへ</button>

@code {
    void GoToProfile()
    {
        Navigation.NavigateTo("/profile");
    }
}

このように、ユーザー操作に応じてスクリプト的に画面遷移が行えます。これにより、操作の流れを制御したり、 条件に応じて異なる画面に誘導したりすることが可能です。

絶対パスと相対パス

NavigateTo の引数には絶対パス（例：/home）と相対パス（例：../parent）の両方が使えます。 通常はルートからの絶対パスを使用する方がわかりやすく安全です。

URLの末尾スラッシュの注意点

Blazorでは、末尾のスラッシュ（/）の有無もURL判定に影響することがあります。 たとえば、/home と /home/ は別のページとして扱われる可能性があるため、 ルーティング設定とリンク先のURL表記は統一しておきましょう。

戻る・進むの履歴管理

Blazorはブラウザの履歴（History API）とも連携しているため、ユーザーは戻る・進む操作も問題なく行えます。 ただし、状態管理やフォームの入力値など、画面遷移時に残すべきデータがある場合は、別途 StateContainer の設計などが必要になります。

これで、Blazorアプリケーション内でのページ遷移の基本は押さえることができました。 次のセクションでは、より複雑な画面構成や状態管理の話に進む準備として、データとロジックのやり取りに注目していきましょう。