「Photino.Blazor - ルーティング」の版間の差分

← 古い編集

ビジュアルウィキテキスト

@@ 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>
@@ 50行目: / 114行目: @@
 *: <PageTitle>タグは、ページタイトルを設定する。一般的には、エラーメッセージを表示する。
 <br>
-@using Photino1.Sharedは、Blazorのusingディレクティブのシンタックスであり、Photino1.Shared名前空間をインポートする宣言である。<br>
+また、上記の例において、<u>@using PhotinoSample.Shared</u>はBlazorのusingディレクティブのシンタックスであり、PhotinoSample.Shared名前空間をインポートする宣言である。<br>
 <br>
 * @
@@ 56行目: / 120行目: @@
 * using
 *: C#のusingステートメントと同じ働きをする。
-* Photino1.Shared
+* PhotinoSample.Shared
 *: インポートする名前空間
 *: 上記の例では、この名前空間には、MainLayout.razorファイル等の共有コンポーネントが含まれている。
-* Shared
+*: <br>
 *: Sharedフォルダ / 名前空間には、アプリケーション全体で共有されるコンポーネントやレイアウトが配置されるのが一般的である。
 <br>
-この宣言により、Photino1.Sharedに含まれるコンポーネントを完全修飾名 (Photino1.Shared.MainLayout等) を使用せずに直接参照できる。
+この宣言により、PhotinoSample.Sharedに含まれるコンポーネントを完全修飾名 (PhotinoSample.Shared.MainLayout等) を使用せずに直接参照できる。
   <syntaxhighlight lang="xml">
   <!-- 例: -->
-  <!-- using宣言がない場合 -->
+  <!-- @using宣言がない場合 -->
-  @typeof(Photino1.Shared.MainLayout)
+  @typeof(PhotinoSample.Shared.MainLayout)
-  <!-- using宣言がある場合 -->
+  <!-- @using宣言がある場合 -->
   @typeof(MainLayout)  // より簡潔に記述できる
   </syntaxhighlight>