סיכום: ניווט
חלק מהיחידה היסודות של Next.js במסלול ה-React של Coddy. שיעור 38 מתוך 47.
אתגר
בינוניסיכום הפרק: אפליקציה קטנה אחת, שני הכיוונים של כתובת ה-URL: סרגל ניווט שקורא היכן הוא נמצא, ודף תפריט שמסונן לפי מחרוזת השאילתה.
- ב-
components/Nav.jsx, יש לקרוא ל-usePathname()ולהעניק לכל קישור את className"nav-link active"כאשר ה-hrefשלו תואם לנתיב הנוכחי, ואת"nav-link"הרגיל אחרת. Home הוא/, ו-Menu הוא/menu. - ב-
app/menu/page.jsx, יש לקרוא אתcategoryמתוךsearchParams(זכרו שזו הבטחה) ולהציג רק את המנות התואמות, או את כולן כשלא צוין category.
/menu?category=pizza אמור להציג 2 מתוך 4 המנות, כאשר הקישור Menu מודגש.
נסו בעצמכם
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>
);
}