Blazor - ルーティング

概要

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

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

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

パラメータの受け渡し

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

 @page "/user/{Id}"
 
 @code {
    [Parameter]
    public string Id { get; set; }
 }

ナビゲーション

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

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

 @inject NavigationManager NavigationManager
 
 @code {
    private void NavigateToCounter()
    {
       NavigationManager.NavigateTo("counter");
    }
 }

リンクによる遷移

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

 <NavLink href="counter">
    <span class="oi oi-plus"></span> Counter
 </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]属性を使用することにより、特定のルートへのアクセスを制限することができる。