Photino.Blazor - ルーティングのソースを表示

== 概要 ==
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>

== ルーティングの設定 ==
Photinoアプリケーションのルーティングの基本設定を行い、以下に示す機能を提供する。<br>
これはBlazorの標準的なルーティング設定であり、SPAアプリケーションのナビゲーション機能を実現するために必要な基本的な設定となっている。<br>
<br>
* 正しいURLの場合は対応するページを表示する。
* 存在しないページにアクセスした場合は、エラーページを表示する。
* 全てのページに共通のレイアウトを適用する。
<br>
以下の例では、Blazor向けのルーティング設定を行っている。<br>
<br>
 <syntaxhighlight lang="xml">
 <!-- 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>
 </syntaxhighlight>
<br>
* <Router>タグ
*: Blazorアプリケーションのルーティングを制御する主要なコンポーネントである。
*: AppAssembly属性は、ルーティング情報を含むアセンブリを指定する。
*: 上記の例は、Appクラスを含むアセンブリ
*: <br>
* <Found>タグ
*: ルートが見つかった場合の処理を定義する。
** <RouteView>タグ
**: 実際のページコンテンツを表示する。
**: 上記の例において、DefaultLayout属性は、MainLayoutをデフォルトレイアウトとして指定している。
** <FocusOnNavigate>タグ
**: ナビゲーション後にフォーカスを設定する機能を提供する。
*: <br>
* <NotFound>タグ
*: URLが見つからない場合 (404エラー) において、表示内容を定義する。
*: <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>


{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,Podman,電気回路,電子回路,基板,プリント基板
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

__FORCETOC__
[[カテゴリ:C_Sharp]]