הקישור הפעיל

חלק מהיחידה היסודות של Next.js במסלול ה-React של Coddy. שיעור 34 מתוך 47.

כל אתר עם סרגל ניווט מדגיש את הקישור שבו את נמצאת כרגע. כדי לעשות זאת, רכיב צריך לדעת דבר אחד שהשרת לא יכול לגלות לו בדיעבד: איזו כתובת URL מוצגת כרגע על המסך.

next/navigation מעביר אותו אליך:

'use client';

import { usePathname } from 'next/navigation';

export default function Nav() {
    const pathname = usePathname();
    // בנתיב /about, ‏pathname הוא המחרוזת '/about'
}

זהו hook, ולכן הכללים שכבר ידועים לך חלים: הוא עובד רק ברכיב שהקובץ שלו מתחיל ב-'use client'. זו כל הסיבה שסרגל ניווט הוא בדרך כלל אחד הרכיבים היחידים בצד הלקוח באפליקציה שמרונדרת בצד השרת: הוא צריך לפעול מחדש בכל שינוי של נתיב.

מכאן זו השוואה פשוטה:

<Link
    href="/menu"
    className={pathname === '/menu' ? 'nav-link active' : 'nav-link'}
>
    Menu
</Link>

שימו לב היכן נמצא סרגל הניווט: בתוך הlayout. הוא מוצג פעם אחת ונשאר בכל ניווט, לכן שינוי של pathname הוא שגורם לרינדור מחדש שלו, ולא הרכבה מחדש.

אתגר

קל

סרגל הניווט פועל, אבל אין בו שום דבר שמראה באיזה עמוד אתם נמצאים. תקנו את זה בקובץ components/Nav.jsx.

קראו ל־usePathname() ושמרו את התוצאה ב־pathname.
תנו לכל קישור את המחלקה className "nav-link active" כאשר ה־href שלו תואם ל־pathname, ואת המחלקה הפשוטה "nav-link" אחרת.

קישור Home מצביע אל /, וקישור Menu אל /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>
    );
}