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 membaca kembali nilainya: [slug] memberimu slug, [id] memberimu id.
Selanjutnya, nilai itu diteruskan 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 di 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 kamuawaitnilainya. Itulah sebabnya komponen iniasync. Bab 5 menjelaskan alasan halaman boleh menjadi 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 dinamisnya sudah tersedia: app/menu/[slug]/page.jsx menangani setiap URL di bawah /menu. Masalahnya, halaman itu selalu menampilkan pizza, apa pun hidangan yang kamu minta.
- Buat component-nya
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 berbeda dan mengharapkan dua heading 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.
