SolidStart Routing — SolidJS

SolidStart adalah meta-framework untuk Solid — seperti Next.js untuk React. File-based Routing src/routes/ ├── index.tsx → / ├── about.tsx → /about ├── blog/…

SolidStart adalah meta-framework untuk Solid: Solid ditambah server, pemuatan data, dan routing berbasis file (file-based routing). Routing berbasis file artinya tiap file di folder src/routes otomatis jadi satu alamat di situsmu, tanpa didaftarkan satu per satu. Bayangin daftar isi buku: tiap baris menunjuk ke satu halaman. Di SolidStart, daftar isinya adalah folder src/routes. Tambah file about.tsx, dan situs Toko Buku Kak Nadia langsung punya halaman /about.

🧪 Tebakan cepat: halaman detail buku menulis const id = Number(params.id) di badan komponennya. Kamu membuka /buku/1 (Laskar Pelangi), lalu mengklik tautan ke /buku/2. Judulnya berganti jadi Bumi Manusia, atau tetap Laskar Pelangi? Jawabannya ada di bagian "params dibaca di tempat dipakai".

File di src/routes jadi alamat

Situs Toko Buku Kak Nadia sebagai proyek SolidStart:

src/
├── app.tsx
└── routes/
    ├── index.tsx        → /
    ├── about.tsx        → /about
    ├── buku.tsx         → layout untuk semua /buku/...
    ├── buku/
    │   └── [id].tsx     → /buku/1, /buku/2, /buku/3, ...
    └── [...404].tsx     → alamat lain yang gak cocok

app.tsx: Router dan FileRoutes

src/app.tsx memasang router-nya. Bentuknya mengikuti template SolidStart:

// src/app.tsx
import { Router } from "@solidjs/router"
import { FileRoutes } from "@solidjs/start/router"
import { Suspense } from "solid-js"
import Nav from "./components/Nav"

export default function App() {
  return (
    <Router
      root={(props) => (
        <>
          <Nav />
          <Suspense>{props.children}</Suspense>
        </>
      )}
    >
      <FileRoutes />
    </Router>
  )
}

Nav: tautan dengan A

import { A } from "@solidjs/router"

function Nav() {
  return (
    <nav>
      <A href="/">Home</A>
      <A href="/about">About</A>
    </nav>
  )
}

Route dinamis: [id].tsx dan useParams

Satu file melayani semua buku. Bagian alamat yang ditulis dalam kurung siku di nama file jadi parameter:

// src/routes/buku/[id].tsx
import { useParams } from "@solidjs/router"
import { Show } from "solid-js"

const katalog = [
  { id: 1, judul: "Laskar Pelangi", harga: 89000, stok: 4 },
  { id: 2, judul: "Bumi Manusia", harga: 120000, stok: 2 },
  { id: 3, judul: "Cantik Itu Luka", harga: 95000, stok: 0 },
]

export default function DetailBuku() {
  const params = useParams()
  const buku = () => katalog.find((b) => b.id === Number(params.id))

  return (
    <Show when={buku()} fallback={<p>Buku gak ketemu</p>}>
      <h2>{buku().judul}</h2>
      <p>Rp{buku().harga} · stok {buku().stok}</p>
    </Show>
  )
}
Alamat params.id Halaman
/buku/1 "1" Laskar Pelangi, Rp89000 · stok 4
/buku/2 "2" Bumi Manusia, Rp120000 · stok 2
/buku/99 "99" Buku gak ketemu

params dibaca di tempat dipakai

params reaktif seperti store: dia berubah saat alamatnya berubah. Pindah dari /buku/1 ke /buku/2 memakai route yang sama, jadi komponennya gak jalan lagi. Diuji dengan @solidjs/router 1.0:

Ditulis Sesudah klik dari /buku/1 ke /buku/2
const id = Number(params.id) di badan komponen tetap Laskar Pelangi
const buku = () => katalog.find((b) => b.id === Number(params.id)) Bumi Manusia

Judulnya tetap Laskar Pelangi. Itu jawaban tebakannya. Badan komponen jalan sekali, jadi id cuma menyimpan 1. Bacaan params.id di dalam fungsi yang dipanggil JSX dibaca ulang tiap alamatnya berubah.

Layout: file bernama sama dengan foldernya

// src/routes/buku.tsx
import { A } from "@solidjs/router"

export default function RakBuku(props) {
  return (
    <section class="rak">
      <A href="/">Kembali ke rak</A>
      {props.children}
    </section>
  )
}

Catch-all: [...404].tsx

Titik tiga di dalam kurung siku menangkap sisa alamat berapa pun panjangnya. [...404].tsx di src/routes melayani alamat yang gak cocok dengan file lain, misalnya /promo, dan dipakai sebagai halaman 404. Tanpa file itu, /promo cuma menampilkan Nav dengan isi kosong di bawahnya.

⚠️ Jebakan yang sering ketemu

TL;DR: SolidStart memakai routing berbasis file: tiap file di src/routes jadi satu alamat (index.tsx jadi /, about.tsx jadi /about). Nama file dengan kurung siku, buku/[id].tsx, jadi route dinamis yang nilainya dibaca lewat useParams() sebagai string, dan harus dibaca di tempat dipakai, bukan disimpan sekali. File bernama sama dengan foldernya jadi layout dengan {props.children}, dan [...404].tsx menangkap alamat yang gak cocok. app.tsx memasang <Router root={...}><FileRoutes /></Router>. Tautan ditulis <A href="/about">About</A> dari "@solidjs/router": navigasi tanpa memuat ulang halaman, plus class active. Tambahkan end di tautan /.

Yang akan kamu pelajari