| (同じ利用者による、間の4版が非表示) | |||
| 1行目: | 1行目: | ||
== 概要 == | == 概要 == | ||
Photino.Blazorにおけるルーティングの基本的な仕組みは、通常のBlazorアプリケーションと同様、コンポーネントベースのルーティングを採用している。<br> | |||
ルーティングシステムは、URLパスとコンポーネントを紐付け、ユーザの画面遷移を管理する。<br> | |||
<br> | |||
実装方法として、<code>@page</code>ディレクティブを使用する。<br> | |||
これは、Razorコンポーネントファイルの先頭に記述して、そのコンポーネントがどのURLパスで表示されるかを定義する。<br> | |||
<br> | |||
<syntaxhighlight lang="c#"> | |||
@page "/counter" | |||
<h1>Counter</h1> | |||
// コンポーネントの実装 | |||
// ...略 | |||
</syntaxhighlight> | |||
<br> | |||
パラメータを含むルートも設定可能である。<br> | |||
例えば、ユーザIDに基づいた動的なルーティングは次のように実装することができる。<br> | |||
<syntaxhighlight lang="c#"> | |||
@page "/user/{Id}" | |||
@code { | |||
[Parameter] | |||
public string Id { get; set; } | |||
} | |||
</syntaxhighlight> | |||
<br> | |||
ナビゲーションについては、プログラムによる遷移と宣言的な遷移の両方をサポートしている。<br> | |||
プログラムによる遷移には<code>NavigationManager</code>を使用して、宣言的な遷移には<code><NavLink></code>コンポーネントを使用する。<br> | |||
<br> | |||
<syntaxhighlight lang="c#"> | |||
// プログラムによる遷移 | |||
@inject NavigationManager NavigationManager | |||
@code { | |||
private void NavigateToCounter() | |||
{ | |||
NavigationManager.NavigateTo("/counter"); | |||
} | |||
} | |||
// 宣言的な遷移 | |||
<NavLink class="nav-link" href="counter"> | |||
<span>Counter</span> | |||
</NavLink> | |||
</syntaxhighlight> | |||
<br> | |||
ルートパラメータのバリデーションやカスタム制約も実装可能である。<br> | |||
これにより、特定のパターンに一致するパラメータのみを受け付けるようなルーティングを設定することができる。<br> | |||
<br> | |||
さらに、入れ子のルーティングも実装可能である。<br> | |||
これは、@pageディレクティブに複数のルートテンプレートを指定することで実現することができる。<br> | |||
<syntaxhighlight lang="c#"> | |||
@page "/products" | |||
@page "/products/{category}" | |||
@code { | |||
[Parameter] | |||
public string Category { get; set; } | |||
} | |||
</syntaxhighlight> | |||
<br> | |||
エラーハンドリングについて、存在しないルートへのアクセスや無効なパラメータに対して、カスタムの404ページや適切なエラーページを表示するように設定できる。<br> | |||
これは、アプリケーションのルートコンポーネントでRouterコンポーネントを設定することで実現できる。<br> | |||
<br> | |||
また、Blazorの認証システムと組み合わせることにより、特定のルートへのアクセスを認証・認可により制限することも可能である。<br> | |||
<br><br> | <br><br> | ||
| 49行目: | 113行目: | ||
*: URLが見つからない場合 (404エラー) において、表示内容を定義する。 | *: URLが見つからない場合 (404エラー) において、表示内容を定義する。 | ||
*: <PageTitle>タグは、ページタイトルを設定する。一般的には、エラーメッセージを表示する。 | *: <PageTitle>タグは、ページタイトルを設定する。一般的には、エラーメッセージを表示する。 | ||
<br> | |||
また、上記の例において、<u>@using PhotinoSample.Shared</u>はBlazorのusingディレクティブのシンタックスであり、PhotinoSample.Shared名前空間をインポートする宣言である。<br> | |||
<br> | |||
* @ | |||
*: BlazorのRazor構文であることを示すシンボルである。 | |||
* using | |||
*: C#のusingステートメントと同じ働きをする。 | |||
* PhotinoSample.Shared | |||
*: インポートする名前空間 | |||
*: 上記の例では、この名前空間には、MainLayout.razorファイル等の共有コンポーネントが含まれている。 | |||
*: <br> | |||
*: Sharedフォルダ / 名前空間には、アプリケーション全体で共有されるコンポーネントやレイアウトが配置されるのが一般的である。 | |||
<br> | |||
この宣言により、PhotinoSample.Sharedに含まれるコンポーネントを完全修飾名 (PhotinoSample.Shared.MainLayout等) を使用せずに直接参照できる。 | |||
<syntaxhighlight lang="xml"> | |||
<!-- 例: --> | |||
<!-- @using宣言がない場合 --> | |||
@typeof(PhotinoSample.Shared.MainLayout) | |||
<!-- @using宣言がある場合 --> | |||
@typeof(MainLayout) // より簡潔に記述できる | |||
</syntaxhighlight> | |||
<br><br> | <br><br> | ||