Blazor - ルーティング

概要

Blazorでは、URLパターンとコンポーネントを紐付けることでルーティングを実現する。

Blazorのルーティングは、@pageディレクティブを使用して設定する。
このように定義することにより、/counterというURLにアクセスした時にこのコンポーネントが表示される。

※注意
ファイル名は大文字で始まる必要があり、razorファイルの拡張子は.razorの必要がある。

 // Pages/Counter.razorファイル
 
 @page "/counter"
 @page "/counter/{currentCount:int}"
 
 <h1>Counter</h1>
 
 <p>Current count: @currentCount</p>
 
 @code {
    // オプションのルートパラメータ
    [Parameter]
    public int currentCount { get; set; }
 }

ルーティングファイル

Blazorでは、Pagesディレクトリに配置されたrazorファイルがルーティングの対象となる。

以下に示す/counterの場合では、デフォルトでは以下に示すファイルが参照される。

• /<プロジェクトのトップディレクトリ>/Pages/Counter.razorファイル

 @page "/counter"
 
 <h1>Counter</h1>

ただし、これは規約ベースのルーティングであり、@pageディレクティブで明示的に別のルートを指定することも可能である。

以下に示すように設定することにより、異なるファイル配置でも/counterにルーティングすることができる。

 // 例 : /Pages/MyCounter/Index.razorファイル
 
 @page "/counter"

Pagesディレクトリ配下のファイルへのルーティング

• /counter --> /Pages/Counter.razor

また、ネストされたディレクトリの場合は以下のようになる。

• /mypage --> /Pages/MyPage.razor
• /admin/dashboard --> /Pages/Admin/Dashboard.razor
• /settings/profile --> /Pages/Settings/Profile.razor

特殊なケースとして、Indexページは以下のようになる。

• / --> /Pages/Index.razor
• /admin --> /Pages/Admin/Index.razor

なお、@pageディレクティブで明示的にルートを指定した場合は、この規約が上書きされる。

パラメータの受け渡し

ルートパラメータは波括弧で囲んで指定して、対応するプロパティに[Parameter]属性を付与する。

Blazorのパラメータ受け渡しには、3つの方法がある。

ルートパラメータ

 @page "/user/{Id:int}"
 
 @code {
    [Parameter]
    public int Id { get; set; }
 
    // 整数以外の値が渡された場合は404エラー
 }

複数パラメータ

 @page "/orders/{CustomerId:int}/{OrderId:int}"
 
 @code {
    [Parameter]
    public int CustomerId { get; set; }
 
    [Parameter]
    public int OrderId { get; set; }
 }

クエリパラメータ

 // URL: /search?query=blazor&page=1
 
 @page "/search"
 @inject NavigationManager Navigation
 
 @code {
    private string SearchQuery;
    private int Page;
 
    protected override void OnInitialized()
    {
       var uri = Navigation.ToAbsoluteUri(Navigation.Uri);
 
       if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("query", out var query))
       {
          SearchQuery = query;
       }
 
       if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("page", out var page))
       {
          Page = Convert.ToInt32(page);
       }
    }
 }

制約パターンの使用

制約パターンも使用できる。

 @page "/date/{date:datetime}"
 @page "/products/{id:guid}"
 @page "/blog/{*slug}"  // catch-allパラメータ

カスケード

これらのパラメータは、コンポーネント間でのカスケード時にも使用可能である。

 <ChildComponent CustomerId="@CustomerId" />

ナビゲーション

プログラムによる画面遷移とリンクによる遷移の2つの方法がある。

NavigationManagerを使用したプログラムによる遷移

 @inject NavigationManager Navigation
 
 @code {
    private void Navigate()
    {
       // 基本的な遷移
       Navigation.NavigateTo("counter");
 
       // 強制的なページリロード
       Navigation.NavigateTo("counter", forceLoad: true);
 
       // 相対パスでの遷移
       Navigation.NavigateTo("counter", forceLoad: false);
 
       // クエリパラメータを含む遷移
       Navigation.NavigateTo($"search?query={Uri.EscapeDataString(searchTerm)}");
 
       // 戻る
       Navigation.NavigateTo(Navigation.Uri);
    }
 
    // URLの変更を検知
    protected override void OnInitialized()
    {
       Navigation.LocationChanged += LocationChanged;
    }
 
    private void LocationChanged(object sender, LocationChangedEventArgs e)
    {
       // URLが変更された時の処理
    }
 }

NavLinkコンポーネントを使用したリンクによる遷移

NavLinkコンポーネントを使用して遷移する。

 // 基本的な使用方法
 <NavLink href="counter">Counter</NavLink>
 
 // アクティブ時のスタイル指定
 <NavLink href="counter" ActiveClass="active">Counter</NavLink>
 
 // Match属性による一致条件の指定
 <NavLink href="users" Match="NavLinkMatch.Prefix">Users</NavLink>

オプションパラメータ / クエリパラメータ

オプションパラメータ

波括弧内に?を付加することにより、実現できる。

 @page "/user/{id?}"
 
 @code {
    [Parameter]
    public string Id { get; set; }
 
    protected override void OnInitialized()
    {
       if (string.IsNullOrEmpty(Id))
       {
          Id = "default";
       }
    }
 }

レイアウトの適用

Blazorのルーティングでは、レイアウトの適用も重要である。
_Imports.razorファイルにおいて、デフォルトレイアウトを指定して、必要に応じて個別のコンポーネントで@layout指示子を使用して上書きすることができる。

エラーハンドリング

404エラー等のルーティングエラーは、App.razorで設定したNotFoundテンプレートによって処理される。
これにより、ユーザフレンドリーなエラー画面を表示することが可能である。

認証 / 認可

[Authorize]属性を使用することにより、特定のルートへのアクセスを制限することができる。