Svelte Routing

Definisi

SvelteKit menangani routing lewat struktur folder di src/routes. Tiap file +page.svelte jadi halaman, +layout.svelte jadi pembungkus, dan +page.js/+page.server.js menyediakan load untuk ambil data sebelum render.

Kapan dipakai

Pakai SvelteKit saat butuh routing, SSR, dan data loading terstruktur tanpa setup manual. Untuk widget statis tanpa route, cukup Svelte murni.

Cara kerja

Struktur

text

src/routes/
  +layout.svelte      # wrap semua halaman
  +page.svelte       # /
  about/+page.svelte # /about
  blog/[slug]/+page.svelte # /blog/:slug

Load data

js

// blog/[slug]/+page.js
export async function load({ params }) {
  const post = await getPost(params.slug);
  return { post };
}

svelte

<script>
  export let data; // hasil load
</script>
<h1>{data.post.title}</h1>

Navigasi

svelte

<script>
  import { goto } from '$app/navigation';
</script>
<a href="/about">Tentang</a>
<button on:click={() => goto('/dashboard')}>Masuk</button>

Struktur alur

Catatan implementasi

• Parameter dinamis: [slug] (satu), [...rest] (catch-all), [[slug]] (optional).
• load di +page.server.js jalan di server; di +page.js bisa client maupun server.
• export let data di page otomatis dari load; di layout pakai export let data juga.
• Gunakan $app/stores untuk page (URL aktif) bila perlu reactive ke URL.

Kesalahan umum

• Lupa export let data: hasil load tidak muncul di komponen.
• Mutasi data load langsung: pakai $: atau salin dulu.
• Route param typo: [slug] vs [slugin] membuat halaman 404.
• Load berat di client: pindahkan ke .server.js bila tak boleh kelihatan di browser.

Referensi terkait

• Svelte Memulai: Instalasi, Struktur, Reactivity Dasar
• Next.js Routing, Server/Client, Data Fetching
• React Router / Routing konsep