Dalam SvelteKit, route parameter memungkinkan kita membuat URL dinamis seperti /artikel/sveltekit-routing tanpa harus menulis file statis untuk setiap halaman. Pola ini sangat umum untuk halaman detail artikel, produk, profil pengguna, atau konten lain yang dibedakan oleh slug atau ID.

Pada tutorial ini, kita akan membangun alur yang praktis: mulai dari halaman daftar artikel sederhana, lalu ketika pengguna mengklik salah satu artikel, aplikasi akan membuka halaman detail berdasarkan slug. Kita akan menggunakan struktur folder SvelteKit seperti [slug], memanfaatkan params di fungsi load, lalu merender hasilnya di +page.svelte.

Contoh di artikel ini sengaja menggunakan mock data agar fokus pada konsep routing dan pengambilan data berdasarkan parameter. Setelah paham polanya, Anda bisa mengganti sumber datanya dengan database, CMS, atau API eksternal.

Memahami Konsep Route Parameter di SvelteKit

SvelteKit menggunakan sistem routing berbasis folder. Nama folder dan file di dalam direktori src/routes akan menentukan URL aplikasi Anda.

Jika Anda membuat struktur seperti ini:

src/routes/artikel/[slug]/+page.svelte

Maka SvelteKit akan memahami bahwa URL /artikel/apapun-nilai-slugnya harus ditangani oleh halaman tersebut. Nilai dinamis dari segmen URL itu bisa diakses melalui params.slug di fungsi load.

Kenapa pendekatan ini penting?

  • Rapi dan deklaratif: struktur folder langsung mencerminkan struktur URL.
  • Mudah diskalakan: cocok untuk banyak halaman detail.
  • Terintegrasi dengan data loading: parameter route dapat dipakai untuk mengambil data sebelum halaman dirender.

Dalam tutorial ini, kita akan membuat route daftar di /artikel dan route detail di /artikel/[slug].

Struktur Folder Proyek

Berikut struktur folder yang akan kita gunakan:

src/
├── lib/
│   └── data/
│       └── articles.js
└── routes/
    └── artikel/
        ├── +page.js
        ├── +page.svelte
        └── [slug]/
            ├── +page.js
            └── +page.svelte

Penjelasannya:

  • src/lib/data/articles.js: berisi data artikel mock.
  • src/routes/artikel/+page.js: mengambil daftar artikel untuk halaman list.
  • src/routes/artikel/+page.svelte: menampilkan daftar artikel.
  • src/routes/artikel/[slug]/+page.js: mengambil detail artikel berdasarkan params.slug.
  • src/routes/artikel/[slug]/+page.svelte: merender halaman detail.

Memisahkan data ke folder lib membuat kode lebih bersih dan mudah diganti nanti jika sumber data berubah.

Membuat Mock Data Artikel

Buat file src/lib/data/articles.js:

export const articles = [
  {
    slug: 'mengenal-sveltekit',
    title: 'Mengenal SvelteKit',
    excerpt: 'Pengantar singkat tentang apa itu SvelteKit dan kapan menggunakannya.',
    content: `
      SvelteKit adalah framework aplikasi yang dibangun di atas Svelte.
      Framework ini menyediakan routing berbasis file, data loading, SSR,
      prerendering, dan banyak fitur lain untuk membangun aplikasi web modern.
    `,
    author: 'Andi',
    publishedAt: '2025-01-10'
  },
  {
    slug: 'routing-dasar-sveltekit',
    title: 'Routing Dasar di SvelteKit',
    excerpt: 'Memahami bagaimana struktur folder memengaruhi URL aplikasi.',
    content: `
      Di SvelteKit, setiap folder di dalam src/routes mewakili segmen URL.
      File +page.svelte digunakan untuk halaman, sedangkan +layout.svelte
      dipakai untuk layout bersama.
    `,
    author: 'Budi',
    publishedAt: '2025-01-12'
  },
  {
    slug: 'load-function-sveltekit',
    title: 'Menggunakan Load Function di SvelteKit',
    excerpt: 'Cara mengambil data sebelum halaman dirender menggunakan load.',
    content: `
      Fungsi load dipakai untuk menyiapkan data yang dibutuhkan halaman.
      Data yang dikembalikan dari load akan tersedia di komponen +page.svelte
      melalui prop data.
    `,
    author: 'Citra',
    publishedAt: '2025-01-15'
  }
];

Beberapa catatan penting:

  • slug harus unik, karena akan dipakai sebagai identitas URL.
  • excerpt berguna untuk daftar artikel.
  • content dipakai di halaman detail.

Di aplikasi nyata, data ini biasanya datang dari database atau API. Namun selama struktur objeknya konsisten, logika routing tetap sama.

Membuat Halaman Daftar Artikel

Load data untuk halaman list

Buat file src/routes/artikel/+page.js:

import { articles } from '$lib/data/articles';

export function load() {
  return {
    articles
  };
}

Fungsi load ini akan berjalan sebelum halaman dirender. Nilai yang dikembalikan akan tersedia sebagai data di +page.svelte.

Render daftar artikel

Buat file src/routes/artikel/+page.svelte:

<script>
  export let data;
</script>

<svelte:head>
  <title>Daftar Artikel</title>
  <meta name="description" content="Daftar artikel sederhana di SvelteKit" />
</svelte:head>

<h1>Daftar Artikel</h1>

{#if data.articles.length === 0}
  <p>Belum ada artikel.</p>
{:else}
  <ul>
    {#each data.articles as article}
      <li>
        <h2>
          <a href={`/artikel/${article.slug}`}>{article.title}</a>
        </h2>
        <p>{article.excerpt}</p>
        <small>
          Oleh {article.author} • {article.publishedAt}
        </small>
      </li>
    {/each}
  </ul>
{/if}

Di sini, setiap artikel ditampilkan sebagai link menuju URL detail berdasarkan slug. Misalnya, artikel dengan slug routing-dasar-sveltekit akan mengarah ke /artikel/routing-dasar-sveltekit.

Anda juga bisa memakai komponen link internal jika diperlukan, tetapi penggunaan <a href> untuk route internal tetap umum dan diproses oleh SvelteKit.

Membuat Halaman Detail Berdasarkan Slug

Mengambil parameter dari URL

Sekarang kita masuk ke bagian inti: folder [slug]. Buat file src/routes/artikel/[slug]/+page.js:

import { error } from '@sveltejs/kit';
import { articles } from '$lib/data/articles';

export function load({ params }) {
  const article = articles.find((item) => item.slug === params.slug);

  if (!article) {
    throw error(404, 'Artikel tidak ditemukan');
  }

  return {
    article
  };
}

Penjelasan penting:

  • params.slug berisi nilai dinamis dari URL.
  • Kita mencari artikel yang slug-nya cocok.
  • Jika tidak ditemukan, kita lempar error(404) agar SvelteKit menampilkan status yang tepat.

Kenapa validasi ini penting? Karena tanpa pengecekan, halaman bisa mencoba merender data undefined dan menyebabkan error yang membingungkan. Selain itu, status 404 yang benar juga penting untuk UX dan SEO.

Render detail artikel

Buat file src/routes/artikel/[slug]/+page.svelte:

<script>
  export let data;
</script>

<svelte:head>
  <title>{data.article.title}</title>
  <meta name="description" content={data.article.excerpt} />
</svelte:head>

<article>
  <h1>{data.article.title}</h1>

  <p>
    <small>
      Oleh {data.article.author} • {data.article.publishedAt}
    </small>
  </p>

  <p>{data.article.content}</p>

  <p>
    <a href="/artikel">← Kembali ke daftar artikel</a>
  </p>
</article>

Komponen ini menerima objek article dari load, lalu menampilkannya. Dengan pola ini, file komponen tetap sederhana karena logika pencarian data sudah dipindahkan ke +page.js.

Alur Lengkap dari List ke Detail

Setelah semua file dibuat, alurnya menjadi seperti ini:

  1. Pengguna membuka /artikel.
  2. src/routes/artikel/+page.js memuat daftar artikel.
  3. +page.svelte menampilkan list beserta link ke detail.
  4. Pengguna mengklik salah satu artikel.
  5. SvelteKit membuka route /artikel/[slug].
  6. src/routes/artikel/[slug]/+page.js membaca params.slug.
  7. Aplikasi mencari artikel yang cocok dari data.
  8. Jika ditemukan, halaman detail dirender. Jika tidak, SvelteKit mengembalikan 404.

Inilah alasan route param sangat berguna: satu struktur file bisa menangani banyak URL dinamis tanpa duplikasi komponen.

Alternatif: Menaruh Logika Langsung di +page.svelte

Secara teknis, Anda bisa saja membaca parameter di sisi klien dan memuat data langsung di komponen. Namun untuk kasus SvelteKit, pendekatan dengan load biasanya lebih baik karena:

  • data disiapkan sebelum render,
  • lebih rapi secara arsitektur,
  • lebih mudah menangani error 404,
  • lebih konsisten jika nanti data berasal dari API atau server.

Memindahkan pengambilan data ke load juga membuat komponen fokus pada tampilan, bukan logika pencarian data.

Kesalahan Umum yang Sering Terjadi

1. Nama folder dinamis salah

Route parameter harus menggunakan tanda kurung siku, misalnya [slug]. Jika Anda menulis slug biasa, URL akan dianggap statis.

2. Salah akses nilai parameter

Nilai slug tersedia di params.slug, bukan langsung di slug atau variabel lain. Pastikan fungsi load menerima argumen:

export function load({ params }) {
  console.log(params.slug);
}

3. Tidak menangani data yang tidak ditemukan

Jika artikel tidak ada, jangan biarkan halaman gagal secara diam-diam. Gunakan throw error(404, ...) agar perilaku aplikasi lebih jelas.

4. Slug tidak unik

Jika dua artikel memiliki slug yang sama, pencarian dengan find() akan mengambil hasil pertama dan membuat perilaku aplikasi tidak konsisten.

5. Link ke detail tidak sesuai pola URL

Pastikan path link sama dengan struktur route Anda. Jika route-nya ada di /artikel/[slug], maka link harus seperti:

<a href={`/artikel/${article.slug}`}>Buka artikel</a>

Tips Debugging

  • Cetak nilai params di load untuk memastikan slug terbaca sesuai URL.
  • Periksa ejaan slug di data dan di browser, terutama huruf kecil, tanda hubung, atau spasi.
  • Uji URL yang tidak valid seperti /artikel/slug-tidak-ada untuk memastikan 404 bekerja.
  • Pisahkan data dan tampilan agar lebih mudah melacak apakah masalah ada di pencarian data atau di render komponen.

Pengembangan Lanjutan

Setelah pola dasar ini berjalan, Anda bisa mengembangkannya ke skenario yang lebih nyata:

  • Mengganti mock data dengan data dari API.
  • Mengambil artikel dari database menggunakan endpoint server.
  • Menambahkan route param lain, misalnya /kategori/[slug].
  • Menggunakan konten HTML atau markdown untuk isi artikel.
  • Menambahkan halaman error kustom untuk 404.

Jika data berasal dari backend, konsepnya tetap sama: params.slug dipakai sebagai input query untuk mengambil record yang sesuai.

Penutup

Route parameter di SvelteKit adalah cara yang bersih dan efisien untuk membuat halaman dinamis berdasarkan URL. Dengan folder [slug], Anda dapat membangun banyak halaman detail tanpa harus membuat file satu per satu.

Dalam tutorial ini, kita sudah melihat alur lengkap:

  • menyimpan data artikel mock,
  • menampilkan daftar artikel,
  • membuat route dinamis dengan [slug],
  • menggunakan params di load,
  • merender hasilnya di +page.svelte,
  • dan menangani kasus 404.

Jika Anda baru belajar SvelteKit, pola ini adalah fondasi penting karena akan sering dipakai dalam aplikasi nyata. Setelah menguasainya, Anda akan lebih mudah membangun blog, katalog produk, halaman dokumentasi, atau sistem konten lain yang bergantung pada URL dinamis.