Belajar SvelteKit - Routing & Nested Routes

#Pendahuluan

Routing adalah fondasi setiap aplikasi web: ia menentukan halaman apa yang tampil untuk URL tertentu. Episode 4 mengubah cara kalian memikirkan routing — di SvelteKit, struktur folder adalah struktur URL, dan tidak ada konfigurasi routing terpusat yang harus dijaga.

Pendekatan file-based ini terdengar sederhana, tapi mengandung banyak kekuatan: dynamic routes, nested layouts, hingga navigation prefetching. Memahami keseluruhan peta fitur routing di episode ini akan membuat episode-episode berikutnya, terutama data loading dan forms, jauh lebih mudah.

Kita mulai dari yang paling dasar, lalu naik ke teknik yang lebih kompleks. Pastikan proyek dari episode 3 masih berjalan, karena semua contoh di sini bisa langsung kalian praktikkan.

#File-Based Routing di src/routes

Setiap folder di dalam src/routes mewakili segmen URL. File +page.svelte di dalam folder tersebut menjadi halaman yang dirender untuk URL itu.

src/routes/
|-- +page.svelte          -> /
|-- about/
|   |-- +page.svelte      -> /about
|-- blog/
|   |-- +page.svelte      -> /blog
|   |-- [slug]/
|   |   |-- +page.svelte  -> /blog/apa-saja
|-- api/
|   |-- +server.js        -> endpoint GET/POST /api

#File Khusus Berawalan Plus

Awalan plus di nama file menandakan peran khusus. Yang paling umum:

• +page.svelte — komponen halaman.
• +page.js — data untuk halaman, berjalan di server dan client.
• +page.server.js — data untuk halaman, hanya di server.
• +layout.svelte — layout yang membungkus halaman di folder tersebut.
• +server.js — endpoint API murni yang merespons HTTP.

File lain di dalam folder route, seperti komponen pembantu, tidak ikut ter-routing. SvelteKit hanya memperhatikan file berawalan plus. Konvensi ini menjaga folder src/routes tetap bersih.

#Dynamic Routes dan Parameter Opsional

#Dynamic Segment dengan Kurung Siku

Folder bernama [slug] menangkap nilai dinamis dari URL. Nilai tersebut tersedia sebagai params di dalam load function.

Membaca params di load

export const load = async ({ params }) => {
    return {
        slug: params.slug,
        judul: "Artikel " + params.slug
    };
};

Akses params.slug untuk mengambil nilai dari URL. Konvensi ini berlaku untuk semua dynamic segment: [id], [username], [kategori], dan seterusnya.

#Optional Parameter dan Catch-All

Kurung siku ganda [[opsional]] membuat segmen boleh tidak ada di URL. Berguna untuk halaman seperti /docs dan /docs/pengenalan yang berbagi satu file.

Sementara [...rest] menangkap sisa URL dalam jumlah segmen berapa pun, membentuk array. Ini cocok untuk nested path yang fleksibel, misalnya file browser yang mendukung kedalaman folder tak tentu. Keduanya bisa dikombinasikan: folder seperti [...rest] di dalam [modul] memberi fleksibilitas yang sangat besar.

#Nested Layouts dan Layout Reset

#Layout Bersarang

Layout membungkus halaman di dalam folder yang sama dan semua subfolder-nya. src/routes/+layout.svelte berlaku untuk seluruh aplikasi, sedangkan src/routes/blog/+layout.svelte hanya untuk halaman di bawah /blog.

<script>
    let { children } = $props();
</script>
 
<header>Layout blog</header>
<main>
    {@render children()}
</main>

Konten halaman yang dibungkus dirender lewat {@render children()}. Dengan layout bersarang, UI bersama seperti sidebar, breadcrumb, atau header bisa dipecah per bagian aplikasi tanpa duplikasi.

#Route Groups dan Layout Reset

Terkadang beberapa route butuh layout berbeda tapi berada di folder yang sama. Route groups menyelesaikan ini: folder dengan awalan dan akhiran kurung tidak memengaruhi URL. Misalnya (auth)/login dan (auth)/register bisa berbagi layout tanpa menambah segmen URL.

Sementara layout reset +layout@.svelte mengabaikan semua layout induk dan mulai dari root layout. Berguna untuk halaman seperti login yang tidak ingin menampilkan navbar aplikasi. Kombinasi route groups dan layout reset memberi kontrol penuh atas hierarki UI.

#Navigasi dengan Anchor dan goto

#Anchor Biasa

Navigasi dasar tetap memakai elemen anchor. SvelteKit meng-intercept klik pada <a> internal dan melakukan navigasi client-side tanpa reload penuh.

<script>
    import { goto } from "$app/navigation";
    import { page } from "$app/stores";
</script>
 
<a href="/">Beranda</a>
<a href="/blog" data-sveltekit-prefetch>Blog</a>
<a href="/blog/artikel-pertama">Artikel pertama</a>
 
<button onclick={() => goto("/tentang")}>Tentang</button>
 
<p>Halaman aktif: {$page.url.pathname}</p>

Atribut data-sveltekit-prefetch menyuruh SvelteKit mengambil data halaman tujuan sebelum diklik, sehingga navigasi terasa instan. Untuk navigasi dari dalam kode, panggil goto(route) dari modul $app/navigation.

#Menggunakan Store page

Store $page menyediakan informasi halaman aktif: URL, params, dan data yang dihasilkan load function. Untuk menandai menu aktif, bandingkan $page.url.pathname dengan href menu. Gunakan $page.params.slug untuk membaca parameter di komponen apa pun tanpa menurunkannya sebagai prop.

#Penutup

Inti yang harus dibawa pulang:

• Folder di src/routes menjadi URL; hanya file berawalan plus yang ter-routing.
• Dynamic segment [slug] tersedia sebagai params di load function.
• [[opsional]] membuat segmen boleh ada atau tidak; [...rest] menangkap sisa URL.
• Nested layouts membungkus halaman per bagian dan bisa di-reset lewat +layout@.svelte.
• Route groups memungkinkan pembagian UI tanpa mengubah URL.
• Navigasi memakai anchor internal atau goto dari $app/navigation, dengan opsi prefetch lewat data-sveltekit-prefetch.

Di episode 5 selanjutnya kita membahas data loading & forms: load functions di server dan client, fetching data dengan fetch dari dalam load, form handling dengan server actions dan progressive enhancement, serta penanganan error dan redirect.