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

== 概要 ==
Blazorでは、URLパターンとコンポーネントを紐付けることでルーティングを実現する。<br>
<br>
Blazorのルーティングは、<code>@page</code>ディレクティブを使用して設定する。<br>
このように定義することにより、/counterというURLにアクセスした時にこのコンポーネントが表示される。<br>
 <syntaxhighlight lang="c#">
 // Pages/Counter.razorファイル
 
 @page "/counter"
 @page "/counter/{currentCount:int}"
 
 <h1>Counter</h1>
 
 <p>Current count: @currentCount</p>
 
 @code {
    // オプションのルートパラメータ
    [Parameter]
    public int currentCount { get; set; }
 }
 </syntaxhighlight>
<br><br>

== パラメータの受け渡し ==
ルートパラメータは波括弧で囲んで指定して、対応するプロパティに<code>[Parameter]</code>属性を付与する。<br>
<br>
 <syntaxhighlight lang="c#">
 @page "/user/{Id}"
 
 @code {
    [Parameter]
    public string Id { get; set; }
 }
 </syntaxhighlight>
<br><br>

== ナビゲーション ==
プログラムによる画面遷移とリンクによる遷移の2つの方法がある。<br>
<br>
==== NavigationManagerを使用したプログラムによる遷移 ====
 <syntaxhighlight lang="c#">
 @inject NavigationManager NavigationManager
 
 @code {
    private void NavigateToCounter()
    {
       NavigationManager.NavigateTo("counter");
    }
 }
 </syntaxhighlight>
<br>
==== リンクによる遷移 ====
NavLinkコンポーネントを使用して遷移する。<br>
<br>
 <syntaxhighlight lang="c#">
 <NavLink href="counter">
    <span class="oi oi-plus"></span> Counter
 </NavLink>
 </syntaxhighlight>
<br><br>

== オプションパラメータ / クエリパラメータ ==
==== オプションパラメータ ====
波括弧内に<code>?</code>を付加することにより、実現できる。<br>
<br>
 <syntaxhighlight lang="c#">
 @page "/user/{id?}"
 
 @code {
    [Parameter]
    public string Id { get; set; }
 
    protected override void OnInitialized()
    {
       if (string.IsNullOrEmpty(Id))
       {
          Id = "default";
       }
    }
 }
 </syntaxhighlight>
<br><br>

== レイアウトの適用 ==
Blazorのルーティングでは、レイアウトの適用も重要である。<br>
_Imports.razorファイルにおいて、デフォルトレイアウトを指定して、必要に応じて個別のコンポーネントで<code>@layout</code>指示子を使用して上書きすることができる。<br>
<br><br>

== エラーハンドリング ==
404エラー等のルーティングエラーは、App.razorで設定したNotFoundテンプレートによって処理される。<br>
これにより、ユーザフレンドリーなエラー画面を表示することが可能である。<br>
<br><br>

== 認証 / 認可 ==
<code>[Authorize]</code>属性を使用することにより、特定のルートへのアクセスを制限することができる。<br>
<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]]