Blazorのパラメータ付きルーティングとは？URLからデータを受け取る仕組み｜ASP.NET×Blazor入門 5.2
5.2 パラメータ付きルーティング
Blazorでは、URLの一部を変数（パラメータ）として受け取ることができます。 これにより、例えば「ユーザーIDごとに異なるプロフィール画面を表示する」といったことが簡単に実現できます。
ルートパラメータの定義方法
URLからパラメータを受け取るには、@pageディレクティブにプレースホルダーを追加します。 たとえば以下のように定義すると、/user/123 のようなURLが対応可能になります。
@page "/user/{userId:int}"
@code {
[Parameter]
public int userId { get; set; }
}
ここでは、userId という整数型のパラメータをルートから受け取っています。 このように、URLに含まれる値をそのままプロパティとして利用できるのがBlazorの強力な特徴です。
型の指定と型チェック
Blazorではパラメータに対して型の指定ができます。:intや:stringなどを使うことで、 URLに誤った型の値が渡された場合のエラー防止にもつながります。
例：
@page "/product/{productCode:string}"こうすることで、数値ではなく文字列型としてproductCodeを受け取ることができます。 型指定は省略することも可能ですが、明示しておくことで意図が伝わりやすくなります。
オプションパラメータと複数パラメータ
1つのルートに複数のパラメータを含めることもできます。
@page "/order/{orderId:int}/item/{itemId:int}"さらに、オプション扱いのルートを実現するには、複数の@pageを併用して柔軟に対応できます。
@page "/search"
@page "/search/{keyword}"これにより、/searchと/search/keywordの両方で動作するようになります。
注意点：型不一致・存在しないURLへの対応
型が一致しない場合やルートが存在しない場合、Blazorは「該当ページなし」としてルーティングに失敗します。 通常はApp.razor内で指定したNotFoundページが表示されるようになっています。
ユーザーが入力するURLが常に正しいとは限らないため、NotFoundの設計もあわせて考えるとUXが向上します。
次のセクションでは、こうして定義されたルートを使って、実際にユーザーがどのように「画面を移動」するか、ナビゲーションの仕組みを見ていきましょう。 → 5.3 ナビゲーションリンクと遷移
下田 昌平
開発に関するインプットをアウトプットしています。検索ログ
開発・技術相談
システム開発や技術検証、要件定義の作成、アーキテクチャ設計、 テスト設計、運用設計まで、一気通貫で支援しています。 企画段階の「まず相談したい」レベルから、実装・運用まで 幅広く対応できますので、お気軽にお問い合わせください。
お問い合わせ