【Blazor】 NavigationManagerの使い方

BlazorのNavigationManagerは、クライアントサイドのルーティングを管理するためのクラスです。 これを使用すると、ユーザーがアプリケーション内の異なるページ間を移動する際に、URLの変更やページの表示を制御することができます。

例えば、ユーザーがフォームを送信した後に別のページにリダイレクトする場合などに利用されます。

まずNavigationManagerを使うためには、サービスを挿入する必要があります。 newしてインスタンスを作成するわけではないので、注意してください。 このサービスはデフォルトでBlazorにサービス登録されていますので、program.csでサービス登録する必要はありません。

具体的なコードは以下のようになります。 NavigationManagerを利用するには、以下のように@injectを使用して、 NavigationManagerをコンポーネントに注入します。

@* NavigationManagerサービスを挿入する *@
@inject NavigationManager NavigationManager

こうすることで、NavigationManagerの様々な機能を利用することができます。

これらのメソッドやプロパティを駆使すると、ナビゲーションを行う際にとても便利です。 次のセクションでは、具体的なコードを見ていきます。

NavigationManagerを試しに使ってみます。

NavigationManagerには様々な機能がありますが、 今回はボタンを押すとデフォルトで存在するカウンターページへ遷移し、 その際にログも合わせて出力するプログラム例を見ていきます。 BlazorプロジェクトのIndex.razorを以下のように書き換えます。

@page "/"
@using Microsoft.AspNetCore.Components
@using System.Diagnostics
@inject NavigationManager NavigationManager
@implements IDisposable

<button @onclick="NavigateToCounter">Counterへ移動</button>

@code {
    protected override void OnInitialized()
    {
        // ページ遷移したときのイベントを登録
        NavigationManager.LocationChanged += LocationChangedHandler;
    }

    /// <summary>
    /// ページ遷移したときの処理
    /// </summary>
    private void LocationChangedHandler(object? sender, LocationChangedEventArgs e)
    {
        Debug.WriteLine($"遷移先URL: {e.Location}");
    }

    /// <summary>
    /// counterページへ移動
    /// </summary>
    private void NavigateToCounter()
    {
        NavigationManager.NavigateTo("/counter");
    }

    /// <summary>
    /// ページ遷移後の破棄処理
    /// </summary>
    public void Dispose()
    {
        NavigationManager.LocationChanged -= LocationChangedHandler;
    }
}

初期化処理であるOnInitializedでは、 ページ遷移した際のイベントであるNavigationManager.LocationChangedにログ出力するメソッドを登録しています。

ボタンクリックの際に、NavigationManager.NavigateToメソッドを使って、画面遷移するようにしています。 NavigationManager.NavigateToメソッドには、遷移先のページのURLである/counterを指定しています。

Disposeメソッドでは、ページ遷移後はログ出力のメソッドを解除するために書いています。

それでは実行してみましょう。ボタンをクリックして画面が遷移するかを確かめます。

画面が遷移されることが確認できました。 この機に、NavigationManagerの機能を色々試してみてください。