13,230
回編集
「Blazor - ルーティング」の版間の差分
ナビゲーションに移動
検索に移動
→エラーハンドリング
| 441行目: | 441行目: | ||
404エラー等のルーティングエラーは、App.razorで設定したNotFoundテンプレートによって処理される。<br> | 404エラー等のルーティングエラーは、App.razorで設定したNotFoundテンプレートによって処理される。<br> | ||
これにより、ユーザフレンドリーなエラー画面を表示することが可能である。<br> | これにより、ユーザフレンドリーなエラー画面を表示することが可能である。<br> | ||
<br> | |||
例えば、NotFoundセクションをカスタマイズすることにより、より使用しやすいエラー画面を提供することができる。<br> | |||
<br> | |||
<syntaxhighlight lang="c#"> | |||
// App.razorファイル | |||
<Router AppAssembly="@typeof(App).Assembly"> | |||
<Found Context="routeData"> | |||
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /> | |||
</Found> | |||
<NotFound> | |||
<PageTitle>Not found</PageTitle> | |||
<LayoutView Layout="@typeof(MainLayout)"> | |||
<div class="alert alert-danger"> | |||
<h3>ページが見つかりません</h3> | |||
<p>申し訳ありません。要求されたページは存在しません。</p> | |||
<a href="/" class="btn btn-primary">ホームに戻る</a> | |||
</div> | |||
</LayoutView> | |||
</NotFound> | |||
</Router> | |||
</syntaxhighlight> | |||
<br> | |||
==== カスタム404ページ ==== | |||
<syntaxhighlight lang="c#"> | |||
// Pages/CustomNotFound.razorファイル | |||
@inject NavigationManager NavigationManager | |||
<div class="error-container"> | |||
<h2>404 - ページが見つかりません</h2> | |||
<p>リクエストされたURL: @NavigationManager.Uri</p> | |||
<div class="error-actions"> | |||
<button @onclick="GoBack">前のページに戻る</button> | |||
<a href="/" class="btn">ホームページへ</a> | |||
</div> | |||
</div> | |||
@code { | |||
private void GoBack() | |||
{ | |||
NavigationManager.NavigateTo(NavigationManager.Uri); | |||
} | |||
} | |||
</syntaxhighlight> | |||
<br> | |||
上記のファイルをApp.razorファイルで使用する。<br> | |||
<syntaxhighlight lang="c#"> | |||
// App.razorファイル | |||
<NotFound> | |||
<LayoutView Layout="@typeof(MainLayout)"> | |||
<CustomNotFound /> | |||
</LayoutView> | |||
</NotFound> | |||
</syntaxhighlight> | |||
<br><br> | <br><br> | ||