Der aktive Link

Teil des Abschnitts Next.js Essentials der React-Journey von Coddy — Lektion 34 von 47.

Jede Website mit einer Navigationsleiste hebt den Link hervor, auf dem Sie sich gerade befinden. Um das zu tun, muss eine Komponente eine Sache wissen, die der Server ihr im Nachhinein nicht mitteilen kann: welche URL sich gerade auf dem Bildschirm befindet.

next/navigation stellt es für Sie bereit:

'use client';

import { usePathname } from 'next/navigation';

export default function Nav() {
    const pathname = usePathname();
    // auf /about ist pathname der String '/about'
}

Es ist ein Hook, daher gelten die Regeln, die Sie bereits kennen: Er funktioniert nur in einer Komponente, deren Datei mit 'use client' beginnt. Das ist der einzige Grund, warum eine Navigationsleiste normalerweise eine der wenigen Client-Komponenten in einer ansonsten serverseitig gerenderten App ist: Sie muss bei jedem Routenwechsel erneut ausgeführt werden.

Von dort aus ist es ein einfacher Vergleich:

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

Beachten Sie, wo die Navigation liegt: im Layout. Sie wird einmal gerendert und übersteht jede Navigation, sodass die Änderung von pathname das erneute Rendern auslöst, nicht ein erneutes Mappen (Remount).

Aufgabe

Einfach

Die Navigationsleiste funktioniert, aber nichts zeigt an, auf welcher Seite man sich befindet. Behebe das in components/Nav.jsx.

Rufe usePathname() auf und speichere es in pathname.
Gib jedem Link den className "nav-link active", wenn sein href mit pathname übereinstimmt, und ansonsten einfach "nav-link".

Der Home-Link zeigt auf /, der Menu-Link auf /menu.

Probier es selbst

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