BlazorでのWebアプリケーション開発手法１【C#】A08_@pageでURLを指定する

本節では、Counter.razor の1行目に書かれている @page ディレクティブについて見ていきます。

@page ディレクティブとURLの関係

Counter.razor を開くと、1行目に次のように書かれています。

@page "/counter"
@rendermode InteractiveServer
 
<PageTitle>Counter</PageTitle>
 
<h1>Counter</h1>
 
<p role="status">Current count: @currentCount</p>
 
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

図1 Counter.razor の1行目。@page の後ろに “/counter” と書かれている

@page の後ろにダブルクォーテーションで囲まれた文字列（この場合は /counter）が書かれています。この部分が、このページのURLになります。カーソルを合わせると、これは System.String 型の文字列であることが分かりますが、Blazorのルーティングの仕組みではこの文字列がそのままURLとして扱われます。

図2 @page の後ろの “/counter” の部分がURLになっている

実際にアプリを実行し、左メニューの「Counter」を押すと、この /counter のURLに遷移してCounter画面が表示されます。

図3 「Counter」メニューを押すとURLが /counter になりCounter画面が表示される

この /counter という部分がURLになっていることを確認するため、Home画面の状態からアドレスバーに直接 /counter と入力してみます。

図4 遷移前のHome画面（Hello, world!）

図5 アドレスバーに直接 /counter と入力するとCounter画面に遷移する

手動で /counter と入力しても、メニューを押したときと同じくCounter画面に遷移します。つまり @page で指定した文字列が、そのままそのページのURLになっている、ということです。

URLを変更した場合の挙動

試しに、@page の値を “/counter” から “/counter1” に変更してみます。

図6 @page の値を “/counter1” に変更する

この状態で左メニューの「Counter」を押すと、エラー（404）になります。これは、ナビゲーションメニュー側には「/counter に遷移する」という設定が組み込まれているためです。Counter.razor 側のURLは /counter1 に変わっているため、メニューが指す /counter にはもうページが存在しません。

図7 メニューの「Counter」を押しても /counter1 に変わっているためエラー(404)になる

一方、アドレスバーに /counter1 と手動で入力すると、正しくCounter画面が表示されます。

図8 /counter1 と入力すると正しくCounter画面が表示される

このように、@page でまずはそのページのURLを指定する、と考えておいてください。