+page.svelteによるファイルベースルーティング
src/routes配下のファイルパスをURLパスに自動的に対応付けます。
「+page.svelteによるファイルベースルーティング」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
ファイル＝ルート
SvelteKitは、src/routes 以下のフォルダーをURLパスに対応付けます。+page.svelte ファイルがルートを定義します。
ルートページ
src/routes/+page.svelte は / で表示されます。
Aboutページ
src/routes/about/+page.svelte は /about で表示されます。
ネストしたルート
フォルダーはネストできます。src/routes/blog/posts/+page.svelte は /blog/posts で表示されます。
ページコンポーネント
このファイルは通常のSvelteコンポーネントです。学習した機能を自由に使用できます。
<!-- +page.svelte -->
<h1>About Us</h1>
<p>Welcome to our site.</p>ルーティング規約
+ で始まるファイル名には、SvelteKitで特別な意味があります。+page、+layout、+server などです。
インポート不要
ルートを手動で登録する必要はありません。ファイルシステムがルーターになります。
プログラムによるナビゲーション
コード内で移動するには、$app/navigation の goto を使用します。
import { goto } from "$app/navigation";
goto("/about");リンクコンポーネント
通常の <a href> タグを使用します。SvelteKitがクライアントサイドナビゲーション用にインターセプトします。
先読み
ホバー時のプリフェッチを有効にするには、リンクに data-sveltekit-preload-data を使用します。
404ページ
見つからないページをカスタマイズするには、src/routes/+error.svelte を作成します。
確認問題
/products ルートはどこに作成しますか？
まとめ
ルートはファイルシステムによって定義されます。src/routes 以下の任意のフォルダーにある +page.svelte がルートになります。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 41
- レッスン
- 163
よくある質問
「+page.svelteによるファイルベースルーティング」レッスンは無料ですか？
はい。「+page.svelteによるファイルベースルーティング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「+page.svelteによるファイルベースルーティング」で何を学びますか？
src/routes配下のファイルパスをURLパスに自動的に対応付けます。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「+page.svelteによるファイルベースルーティング」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか？
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- +page.svelteによるファイルベースルーティング
- 動的ルートパラメーター：[id]
- オプションパラメーターとRestパラメーター
- レイアウトファイル：+layout.svelte