メインコンテンツにスキップ

SvelteKit はファイルシステムベースのルーティングを使用します。つまり、アプリの*ルート*(ユーザーが特定の URL にアクセスしたときにアプリが実行する内容)は、コードベースのディレクトリによって定義されます。

src/routes 内のすべての +page.svelte ファイルは、アプリにページを作成します。このアプリには現在、/ にマップされる src/routes/+page.svelte という 1 つのページがあります。 /about にアクセスすると、404 Not Found エラーが表示されます。

これを修正しましょう。2 番目のページ src/routes/about/+page.svelte を追加し、src/routes/+page.svelte の内容をコピーして、更新します。

src/routes/about/+page
<nav>
	<a href="/">home</a>
	<a href="/about">about</a>
</nav>

<h1>about</h1>
<p>this is the about page.</p>

これで、//about を行き来できます。

従来のマルチページアプリとは異なり、/about にアクセスして戻ると、シングルページアプリのように現在のページの内容が更新されます。これにより、サーバーレンダリングによる高速起動とインスタントナビゲーションの両方の利点が得られます。(この動作は設定できます。)

GitHub でこのページを編集する

1
2
3
4
5
6
7
8
<nav>
	<a href="/">home</a>
	<a href="/about">about</a>
</nav>
 
<h1>home</h1>
<p>this is the home page.</p>