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 du dich gerade befindest. Dazu muss eine Komponente etwas wissen, was der Server ihr im Nachhinein nicht mitteilen kann: welche URL gerade auf dem Bildschirm angezeigt wird.

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>

Beachte, wo sich die Navigation befindet: im Layout. Sie wird einmal gerendert und bleibt bei jeder Navigation bestehen. Daher sorgt die Änderung von pathname für ein erneutes Rendern, nicht ein erneutes Mounten.

Aufgabe

Einfach

Die Navigationsleiste funktioniert, aber es wird nicht angezeigt, auf welcher Seite du dich befindest. Behebe das in components/Nav.jsx.

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

Der Home-Link verweist 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>
    );
}