Ringkasan: Navigasi
Termasuk bagian Dasar-Dasar Next.js dalam perjalanan React di Coddy. Pelajaran 38 dari 47.
Tantangan
SedangRingkasan bab: satu aplikasi kecil, kedua arah URL: nav yang membaca lokasinya, dan halaman menu yang difilter berdasarkan query string.
- Di
components/Nav.jsx, panggilusePathname()dan berikan setiap tautan className"nav-link active"saathref-nya cocok dengan path saat ini, dan"nav-link"biasa jika tidak cocok. Home adalah/, Menu adalah/menu. - Di
app/menu/page.jsx, ambilcategorydarisearchParams(ingat, ini adalah promise) dan tampilkan hanya hidangan yang cocok, atau semuanya jika tidak ada kategori yang diberikan.
/menu?category=pizza seharusnya menampilkan 2 dari 4 hidangan, dengan tautan Menu disorot.
Coba sendiri
import './globals.css';
import Nav from '../components/Nav.jsx';
export const metadata = {
title: 'Coddy Eats',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<Nav />
{children}
</body>
</html>
);
}