Routing Dynamic Segments

Dynamic segments lo butuhin ketika lo perlu parameter di dalam path suatu route. Misal, lo bikin satu halaman buat detail produk dengan path /product/baju-pria-001, bagian baju-pria-001 itu yang jadi parameter dinamisnya. Di React Router, lo bisa bikin dynamic segments dengan cara nambahin : di depan nama parameter yang lo mau.

Contohnya:

Di dalem file app/routes/product.tsx, lo bisa akses parameter tersebut lewat params yang ada di dalam component props. Contohnya:

Kalo di Next.js, lo harus nulis type manual buat parameter dinamisnya, misal { pid: string }. Sementara di React Router, lo bisa langsung akses params yang udah di-infer tipe datanya dari path yang lo tulis di routes.ts.

Liat lagi kode di atas, di baris pertama ada import type { Route } from './+types/product';. Ini adalah type yang di-generate otomatis oleh React Router buat route module ini. Setiap route module yang lo bikin, React Router bakal generate type-nya di dalam folder spesial .react-router/types/. Dengan konfigurasi rootDirs di tsconfig.json, lo bisa import type tersebut seolah-olah itu ada di dalam folder yang sama dengan route module-nya. Dengan demikian, lo bisa dapet type safety buat props yang ada di dalam component lo, termasuk params, loaderData, dan actionData.

Lo juga bisa bikin beberapa dynamic segments di dalam satu route. Misal, lo mau bikin halaman detail produk dengan kategori, lo bisa bikin kayak gini:

Di dalam file app/routes/product.tsx, lo bisa akses kedua parameter tersebut lewat params:

Lo juga bisa bikin dynamic segments jadi opsional dengan cara nambahin ? di belakang nama parameter. Misal, lo mau bikin halaman detail produk yang bisa diakses dengan atau tanpa kategori, lo bisa bikin kayak gini:

Di dalam file app/routes/product.tsx, lo bisa akses parameter tersebut dengan cara yang sama seperti sebelumnya:

Jadi, route tersebut bakal match dengan path /product/category/baju-pria-001 dan /product/baju-pria-001.