Svelte入門：SvelteKitでルーティング -Vol.2-

用語解説

2024.09.18

この記事は約2分で読めます。

よっしー

こんにちは。よっしーです(^^)

今日は、ルーティングについて解説しています。

背景

ルーティングについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

ロード中にエラーが発生した場合、SvelteKit はデフォルトのエラーページを表示します。 +error.svelte ファイルを追加することで、ルートごとにこのエラーページをカスタマイズできます。

// src/routes/blog/[slug]/+error.svelte
<script>
	import { page } from '$app/stores';
</script>

<h1>{$page.status}: {$page.error.message}</h1>

SvelteKitのエラーハンドリングについて：

エラーバウンダリの探索: SvelteKitは最も近いエラーバウンダリ（+error.svelteファイル）を探します。例えば、src/routes/blog/+error.svelteが存在しない場合、src/routes/+error.svelteを試し、それでもダメならデフォルトのエラーページを表示します。
静的フォールバックエラーページ: それでもエラーが解決しない場合、またはルート+layoutのload関数からエラーが発生した場合、src/error.htmlファイルを作成してカスタマイズできる静的フォールバックエラーページが表示されます。
+layout(.server).js内のエラー: +layout(.server).js内でエラーが発生した場合、最も近いエラーバウンダリはそのレイアウトの上にある+error.svelteファイルです。
404エラー: ルートが見つからない場合（404エラー）、src/routes/+error.svelte（またはそのファイルが存在しない場合はデフォルトのエラーページ）が使用されます。
特定のエラーには使用されない: handleや+server.jsのリクエストハンドラ内で発生したエラーには+error.svelteは使用されません。