Aktywny link

Część sekcji Podstawy Next.js ścieżki React w Coddy. Lekcja 34 z 47.

Każda witryna z paskiem nawigacyjnym wyróżnia link, na którym aktualnie jesteś. Aby to zrobić, komponent musi wiedzieć jedną rzecz, której serwer nie może mu przekazać po fakcie: jaki adres URL jest teraz wyświetlany na ekranie.

next/navigation przekazuje ją do Twojej dyspozycji:

'use client';

import { usePathname } from 'next/navigation';

export default function Nav() {
    const pathname = usePathname();
    // Na /about, pathname jest ciągiem znaków '/about'
}

To hook, więc obowiązują zasady, które już znasz: działa tylko w komponencie, którego plik zaczyna się od 'use client'. Właśnie dlatego pasek nawigacyjny jest zwykle jednym z nielicznych komponentów klienckich w aplikacji renderowanej poza tym po stronie serwera: musi uruchamiać się ponownie przy każdej zmianie trasy.

Od tego momentu to zwykłe porównanie:

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

Zwróć uwagę, gdzie znajduje się nawigacja: w układzie. Renderuje się raz i pozostaje przy każdym przejściu, więc to zmiana pathname powoduje ponowne renderowanie, a nie ponowne zamontowanie.

Wyzwanie

Łatwy

Pasek nawigacyjny działa, ale nic nie wskazuje, na której stronie jesteś. Napraw to w components/Nav.jsx.

Wywołaj usePathname() i zapisz wynik w pathname.
Przypisz każdemu linkowi className "nav-link active", gdy jego href pasuje do pathname, a w przeciwnym razie zwykłe "nav-link".

Link Home prowadzi do /, a link Menu do /menu.

Spróbuj swoich sił

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>
    );
}