Rute Dinamis
Termasuk bagian Dasar-Dasar Next.js dalam perjalanan React di Coddy. Pelajaran 8 dari 47.
Menu dengan empat puluh hidangan tidak memerlukan empat puluh folder. Kamu ingin /menu/pizza, /menu/pasta, dan /menu/tiramisu menjadi halaman yang sama yang menampilkan data berbeda.
Itulah arti tanda kurung siku dalam nama folder:
app/
menu/
[slug]/
page.jsx -> /menu/pizza
-> /menu/pasta
-> /menu/anything-at-allFolder biasa cocok dengan namanya sendiri. Folder [bracketed] cocok dengan segmen apa pun dan mengingat bagian yang cocok. Kata di dalam tanda kurung siku adalah nama yang akan kamu gunakan untuk membacanya kembali: [slug] memberimu slug, [id] memberimu id.
Selanjutnya, nilai itu diberikan ke halaman sebagai prop bernama params:
// app/menu/[slug]/page.jsx
export default async function Dish({ params }) {
const { slug } = await params;
return <h1>{slug}</h1>;
}Ada tiga hal yang terjadi dalam file kecil itu:
- Halaman menerima prop
params. Setiap halaman mendapatkannya, dan untuk rute dinamis, prop ini menyimpan segmen yang cocok. paramsadalah Promise di Next 15, jadi kamuawaitprop ini. Itulah alasan komponennyaasync. Bab 5 menjelaskan mengapa halaman boleh bersifat seperti itu.- Destructuring mengambil
slug, yang namanya berasal langsung dari folder[slug].
Kunjungi /menu/pasta dan slug bernilai "pasta". Satu file, setiap hidangan.
Tantangan
MudahFolder dinamis sudah tersedia: app/menu/[slug]/page.jsx menangani setiap URL di bawah /menu. Masalahnya, folder itu menampilkan pizza apa pun hidangan yang kamu minta.
- Buat komponennya menjadi
async. - Baca segmen yang cocok dengan
const { slug } = await params;. - Tampilkan
slugdi dalam<h1 id="dish">, bukan teks yang ditulis langsung.
Pengujian mengunjungi dua hidangan yang berbeda dan mengharapkan dua judul yang berbeda.
Coba sendiri
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
Uji dirimuPelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.
