ルーティング ― @page でURLを割り当てる

導入

Webアプリは/や/counterのように、URLごとに違う画面を出します。Blazorでは、コンポーネントの先頭に@pageディレクティブを書くだけで、そのコンポーネントが特定のURLの画面になります。

説明

.razorの一番上に@page "/パス"を書くと、そのコンポーネントがそのURLに割り当てられます。

@page "/counter"

<h1>カウンター</h1>
<p>現在: @count</p>
<button @onclick="() => count++">+1</button>

@code {
    private int count = 0;
}

flowchart LR
    URL1["/"] --> H["Home.razor（@page "/"）"]
    URL2["/counter"] --> C["Counter.razor（@page "/counter"）"]
    URL3["/about"] --> A["About.razor（@page "/about"）"]

• コンポーネント先頭の@page "/counter"で、URL/counterにこの画面を割り当てる
• 1つのコンポーネントに@pageを複数書けば、複数のURLで同じ画面を出せる
• ルーティングの実体はApp.razorの<Router>。プロジェクト内の@page付きコンポーネントを自動で集めてくれる
• 見つからないURL用に「NotFound（見つかりません）」の表示も設定できる

まとめ

• @page "/パス"でコンポーネントをURLに割り当てる
• <Router>が@pageを集めて振り分ける
• 存在しないURLはNotFoundで受け止める

次回: ページ間をリンクで行き来するNavLinkです。