Menunggu Parameter Route
Termasuk bagian Dasar-Dasar Next.js dalam perjalanan React di Coddy. Pelajaran 24 dari 47.
Rute dinamis memberikan segmen URL kepada halamanmu melalui params. Di Next 16, ada hal penting yang perlu kamu ingat:
params adalah sebuah promise.
// app/menu/[slug]/page.jsx
export default async function DishPage({ params }) {
const { slug } = await params;
// /menu/carbonara -> slug === 'carbonara'
}Lupakan await dan tidak ada yang mengalami crash, inilah yang membuatnya sulit disadari. Melakukan destructuring pada promise hanya menghasilkan undefined:
const { slug } = params; // undefined
const dish = await getDish(slug); // tidak mencari apa punHalaman tetap dirender. Hanya saja halaman itu kosong, atau penuh dengan konten pengganti, dan kamu mencari bug di lapisan datamu yang sebenarnya tidak pernah ada.
Aturan yang sama berlaku untuk searchParams. Keduanya adalah promise, keduanya perlu ditunggu dengan await, dan keduanya hanya tersedia untuk komponen server async, satu alasan lagi mengapa halaman yang baru saja kamu tulis harus bersifat async.
Mengapa perlu menggunakan promise? Agar Next.js dapat mulai merender bagian-bagian halamanmu yang tidak bergantung pada URL sebelum selesai menentukan bagian-bagian yang bergantung pada URL.
Tantangan
Mudahapp/menu/[slug]/page.jsx hampir benar, tetapi tidak pernah menunggu params, sehingga setiap hidangan ditampilkan sebagai Unknown dish.
- Tunggu
paramssebelum melakukan destructuring:const { slug } = await params;
lib/data.js dan halaman beranda dikunci. Mengunjungi /menu/carbonara harus menampilkan Carbonara di #dish-name dan harganya di #dish-price.
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.
Semua pelajaran di Dasar-Dasar Next.js
2Routing dan Tautan
Folder Menjadi RuteRute BertingkatMenautkan HalamanRute DinamisHalaman Tidak DitemukanRekap: Routing5Data di Server
Komponen AsinkronMenunggu Parameter RouteDua Pengambilan Data SekaligusStatus PemuatanMenangani errorRingkasan Pengambilan Data