13,004
回編集
「Photino.Blazor - ルーティング」の版間の差分
ナビゲーションに移動
検索に移動
→概要
細 (Wiki がページ「Photino.NET - ルーティング」を「Photino.Blazor - ルーティング」に、リダイレクトを残さずに移動しました) |
(→概要) |
||
| 1行目: | 1行目: | ||
== 概要 == | == 概要 == | ||
Photino. | Photino.Blazorにおけるルーティングの基本的な仕組みは、通常のBlazorアプリケーションと同様、コンポーネントベースのルーティングを採用している。<br> | ||
ルーティングシステムは、URLパスとコンポーネントを紐付け、ユーザの画面遷移を管理する。<br> | |||
<br> | <br> | ||
実装方法として、<code>@page</code>ディレクティブを使用する。<br> | |||
これは、Razorコンポーネントファイルの先頭に記述して、そのコンポーネントがどのURLパスで表示されるかを定義する。<br> | |||
<br> | <br> | ||
<syntaxhighlight lang="c#"> | |||
@page "/counter" | |||
<h1>Counter</h1> | |||
</syntaxhighlight> | // コンポーネントの実装 | ||
// ...略 | |||
</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> | <br> | ||
<syntaxhighlight lang="c#"> | <syntaxhighlight lang="c#"> | ||
// プログラムによる遷移 | |||
@inject NavigationManager NavigationManager | |||
@code { | |||
private void NavigateToCounter() | |||
{ | |||
NavigationManager.NavigateTo("/counter"); | |||
} | } | ||
} | } | ||
// 宣言的な遷移 | |||
<NavLink class="nav-link" href="counter"> | |||
<span>Counter</span> | |||
</NavLink> | |||
</syntaxhighlight> | </syntaxhighlight> | ||
<br> | <br> | ||
ルートパラメータのバリデーションやカスタム制約も実装可能である。<br> | |||
これにより、特定のパターンに一致するパラメータのみを受け付けるようなルーティングを設定することができる。<br> | |||
<br> | <br> | ||
さらに、入れ子のルーティングも実装可能である。<br> | |||
これは、@pageディレクティブに複数のルートテンプレートを指定することで実現することができる。<br> | |||
<syntaxhighlight lang="c#"> | |||
@page "/products" | |||
@page "/products/{category}" | |||
@code { | |||
[Parameter] | |||
public string Category { get; set; } | |||
} | |||
</syntaxhighlight> | |||
<br> | <br> | ||
エラーハンドリングについて、存在しないルートへのアクセスや無効なパラメータに対して、カスタムの404ページや適切なエラーページを表示するように設定できる。<br> | |||
これは、アプリケーションのルートコンポーネントでRouterコンポーネントを設定することで実現できる。<br> | |||
<br> | <br> | ||
また、Blazorの認証システムと組み合わせることにより、特定のルートへのアクセスを認証・認可により制限することも可能である。<br> | |||
<br><br> | <br><br> | ||