Skip to main content

SvelteKit はファイルシステムベースのルーティング(Routing)を採用しており、アプリの ルート(routes) (言い換えると、ユーザーが特定の URL に移動したときにアプリがすべきこと) については、コードベースのディレクトリで定義します。

src/routes 内にあるすべての +page.svelte ファイルは、アプリのページを作成します。このアプリでは、現在ページが1つあり (src/routes/+page.svelte)、これは / にマッピングされます。/about に移動すると、404 Not Found error となるでしょう。

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

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

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

これによって //about の間を移動できるようになりました。

従来のマルチページアプリとは違い、/about に移動してから戻ると、シングルページアプリのように現在のページのコンテンツが更新されます。これにより、サーバーレンダリングによるスタートアップと、瞬時のナビゲーションという、両方の長所を得ることができます。(この動作は設定で変更できます。)

Next: Layouts

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>
 
initialising