SvelteKit Routing — Svelte

SvelteKit adalah full-stack framework untuk Svelte — seperti Next.js untuk React. File-based Routing src/routes/ ├── +page.svelte → / ├── about/ │ └──…

SvelteKit adalah framework resmi di atas Svelte: dia menambah routing, server, dan build. Routing-nya berbasis file: tiap folder di dalam src/routes adalah satu alamat URL, dan file +page.svelte di dalam folder itu adalah halaman untuk alamat tersebut. Bayangin denah Warung Bu Sri. Pintu depan membuka ruang makan, dari situ ada lorong "menu" ke etalase, dan tiap piring di etalase punya nomor. Gak ada daftar petunjuk jalan yang terpisah; denahnya sendiri adalah petunjuknya. Atap dan papan nama menaungi semua ruangan, dan lorong menu punya kanopi kecilnya sendiri. Ruangan itu folder, jalannya URL, nomor piring itu parameter [id], dan atap serta kanopi itu layout.

🧪 Tebakan cepat: di halaman /menu, pembeli mengklik <a href="/menu/2"> biasa. Browser memuat ulang seluruh halaman dari server, termasuk header Warung Bu Sri, atau gak? Jawabannya ada di bagian "Navigasi: cukup tautan biasa".

Satu folder, satu alamat

Ini folder src/routes proyek Warung Bu Sri, dari proyek SvelteKit sungguhan:

src/routes/
├── +layout.svelte
├── +page.svelte
└── menu/
    ├── +layout.svelte
    ├── +page.svelte
    └── [id]/
        └── +page.svelte
Alamat Halamannya Dibungkus layout
/ src/routes/+page.svelte +layout.svelte
/menu menu/+page.svelte +layout.svelte, lalu menu/+layout.svelte
/menu/2 menu/[id]/+page.svelte, dengan id = "2" sama dengan /menu
/minuman gak ada folder minuman halaman error 404

Layout: bingkai untuk banyak halaman

<!-- src/routes/+layout.svelte -->
<header>
  <h1>Warung Bu Sri</h1>
  <nav>
    <a href="/">Beranda</a>
    <a href="/menu">Menu</a>
  </nav>
</header>

<slot />

Navigasi: cukup tautan biasa

SvelteKit gak butuh komponen khusus untuk tautan. <a href="/menu/2"> biasa sudah cukup: SvelteKit mencegat klik ke alamat di aplikasinya sendiri, menyiapkan halaman tujuan di browser, lalu menukar halamannya saja. Layout yang sama tetap terpasang.

Dicoba di browser: dari /menu, klik ke /menu/2, lalu ke /menu/3. Server gak menerima request untuk kedua halaman itu, dan menu/+layout.svelte cuma dipasang sekali. Header gak digambar ulang. Itu jawaban tebakannya: gak ada muat ulang. Request ke server baru terjadi kalau alamatnya diketik di address bar atau halamannya di-refresh; server lalu mengirim HTML lengkap.

Route dinamis: [id]

Folder bernama dalam kurung siku, seperti [id], adalah route dinamis: dia cocok dengan isi apa pun di posisi itu. /menu/1, /menu/2, dan /menu/3 dilayani satu file yang sama, dan isi bagian itu dibaca sebagai parameter:

<!-- src/routes/menu/[id]/+page.svelte -->
<script>
  import { page } from "$app/state"
</script>

<h2>Menu nomor {page.params.id}</h2>

404: alamat tanpa folder

/minuman gak punya folder, jadi SvelteKit menggambar halaman error bawaannya di dalam layout teratas: header tetap tampil, lalu <h1>404</h1> dan <p>Not Found</p>. Halaman error buatan sendiri, +error.svelte, dibahas bersama load.

Proyek baru: SvelteKit 3 dan Svelte 5

Proyek baru dari npx sv create sekarang memakai SvelteKit 3 (rilis Oktober 2026) dan Svelte 5, dan vite.config.js-nya menyalakan runes untuk semua file proyek. Di sana, layout teratasnya tertulis begini:

<script>
  let { children } = $props()
</script>

<!-- header dan nav seperti di atas -->

{@render children()}

<slot /> masih jalan di proyek itu, tapi compiler memberi warning Using <slot> to render parent content is deprecated. Use {@render ...} tags instead. Latihannya menerima <slot /> dan juga bentuk rune ini, dengan satu beda: tulis {@render children?.()}, karena editor latihan gak mengirim halaman ke layout-nya, dan children() tanpa ?. berhenti dengan error.

Latihan: layout dan navigasi

Latihan pertama adalah +layout.svelte: kode awal sudah punya <nav> dengan tautan Home ke / dan About ke /about, dan kamu menambah <slot /> di bawahnya. Di editor latihan gak ada halaman yang dikirim ke slot itu, jadi yang tampil cuma nav-nya; itu wajar.

Latihan kedua adalah halaman beranda: <h1>Home</h1>, lalu <nav> berisi tiga tautan berurutan, langsung di dalam <nav> tanpa <ul> atau <li>: <a href="/">Home</a>, <a href="/blog">Blog</a>, <a href="/about">About</a>.

⚠️ Jebakan yang sering ketemu

TL;DR: Di SvelteKit, folder di src/routes adalah alamat: src/routes/+page.svelte melayani /, menu/+page.svelte melayani /menu, dan folder [id] adalah route dinamis yang melayani /menu/1, /menu/2, dan seterusnya, dengan page.params.id (dari $app/state) berisi string seperti "2". File halaman harus bernama persis +page.svelte. +layout.svelte membungkus semua halaman di folder dan subfolder-nya, dengan <slot /> sebagai tempat halamannya; layout bisa bertingkat dan tetap terpasang saat pindah halaman. Navigasi cukup <a href="/menu">: SvelteKit menukar halamannya di browser tanpa memuat ulang. Alamat tanpa folder menampilkan error 404 di dalam layout. Proyek baru dari npx sv create (SvelteKit 3) memakai runes, jadi layout-nya menulis {@render children()}; latihannya menerima <slot /> atau {@render children?.()}. Latihannya: nav dengan Home dan About plus <slot />, lalu <h1>Home</h1> dengan tiga tautan ke /, /blog, dan /about.

Yang akan kamu pelajari