Photino.Blazor - ルーティング

概要

Photino.Blazorにおけるルーティングの基本的な仕組みは、通常のBlazorアプリケーションと同様、コンポーネントベースのルーティングを採用している。
ルーティングシステムは、URLパスとコンポーネントを紐付け、ユーザの画面遷移を管理する。

実装方法として、@pageディレクティブを使用する。
これは、Razorコンポーネントファイルの先頭に記述して、そのコンポーネントがどのURLパスで表示されるかを定義する。

 @page "/counter"
 
 <h1>Counter</h1>
 
 // コンポーネントの実装
 // ...略

パラメータを含むルートも設定可能である。
例えば、ユーザIDに基づいた動的なルーティングは次のように実装することができる。

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

ナビゲーションについては、プログラムによる遷移と宣言的な遷移の両方をサポートしている。
プログラムによる遷移にはNavigationManagerを使用して、宣言的な遷移には<NavLink>コンポーネントを使用する。

 // プログラムによる遷移
 @inject NavigationManager NavigationManager
 
 @code {
    private void NavigateToCounter()
    {
       NavigationManager.NavigateTo("/counter");
    }
 }
 
 // 宣言的な遷移
 <NavLink class="nav-link" href="counter">
    <span>Counter</span>
 </NavLink>

ルートパラメータのバリデーションやカスタム制約も実装可能である。
これにより、特定のパターンに一致するパラメータのみを受け付けるようなルーティングを設定することができる。

さらに、入れ子のルーティングも実装可能である。
これは、@pageディレクティブに複数のルートテンプレートを指定することで実現することができる。

 @page "/products"
 @page "/products/{category}"
 
 @code {
    [Parameter]
    public string Category { get; set; }
 }

エラーハンドリングについて、存在しないルートへのアクセスや無効なパラメータに対して、カスタムの404ページや適切なエラーページを表示するように設定できる。
これは、アプリケーションのルートコンポーネントでRouterコンポーネントを設定することで実現できる。

また、Blazorの認証システムと組み合わせることにより、特定のルートへのアクセスを認証・認可により制限することも可能である。

ルーティングの設定

Photinoアプリケーションのルーティングの基本設定を行い、以下に示す機能を提供する。
これはBlazorの標準的なルーティング設定であり、SPAアプリケーションのナビゲーション機能を実現するために必要な基本的な設定となっている。

正しいURLの場合は対応するページを表示する。
存在しないページにアクセスした場合は、エラーページを表示する。
全てのページに共通のレイアウトを適用する。

以下の例では、Blazor向けのルーティング設定を行っている。

 <!-- App.razorファイル -->
 <!-- Blazor向けのルーティング設定を行うコンポーネント -->
 
 @using PhotinoSample.Shared  <!-- SharedディレクトリにMainLayout.razorファイルがあるものとする -->
 
 <Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
       <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
       <FocusOnNavigate RouteData="@routeData" Selector="body" />
    </Found>
    <NotFound>
       <PageTitle>Not found</PageTitle>
       <LayoutView Layout="@typeof(MainLayout)">
          <p role="alert">Sorry, there's nothing at this address.</p>
       </LayoutView>
    </NotFound>
 </Router>

<Router>タグ
Blazorアプリケーションのルーティングを制御する主要なコンポーネントである。

AppAssembly属性は、ルーティング情報を含むアセンブリを指定する。

上記の例は、Appクラスを含むアセンブリ
<Found>タグ
ルートが見つかった場合の処理を定義する。
- <RouteView>タグ
  実際のページコンテンツを表示する。
  
  上記の例において、DefaultLayout属性は、MainLayoutをデフォルトレイアウトとして指定している。
- <FocusOnNavigate>タグ
  ナビゲーション後にフォーカスを設定する機能を提供する。
<NotFound>タグ
URLが見つからない場合 (404エラー) において、表示内容を定義する。

<PageTitle>タグは、ページタイトルを設定する。一般的には、エラーメッセージを表示する。

また、上記の例において、@using PhotinoSample.SharedはBlazorのusingディレクティブのシンタックスであり、PhotinoSample.Shared名前空間をインポートする宣言である。

@
BlazorのRazor構文であることを示すシンボルである。
using
C#のusingステートメントと同じ働きをする。
PhotinoSample.Shared
インポートする名前空間

上記の例では、この名前空間には、MainLayout.razorファイル等の共有コンポーネントが含まれている。

Sharedフォルダ / 名前空間には、アプリケーション全体で共有されるコンポーネントやレイアウトが配置されるのが一般的である。

この宣言により、PhotinoSample.Sharedに含まれるコンポーネントを完全修飾名 (PhotinoSample.Shared.MainLayout等) を使用せずに直接参照できる。

 <!-- 例: -->
 
 <!-- @using宣言がない場合 -->
 @typeof(PhotinoSample.Shared.MainLayout)
 
 <!-- @using宣言がある場合 -->
 @typeof(MainLayout)  // より簡潔に記述できる

Photino.Blazor - ルーティング

目次

概要

ルーティングの設定

案内メニュー

Photino.Blazor - ルーティング

概要

ルーティングの設定

案内メニュー

検索