Il link attivo

Fa parte della sezione Nozioni essenziali di Next.js del percorso React di Coddy. Lezione 34 di 47.

Ogni sito con una barra di navigazione evidenzia il link della pagina in cui ti trovi. Per farlo, un componente deve conoscere una cosa che il server non può dirgli a posteriori: quale URL è visualizzato sullo schermo in questo momento.

next/navigation te lo fornisce:

'use client';

import { usePathname } from 'next/navigation';

export default function Nav() {
    const pathname = usePathname();
    // su /about, pathname è la stringa '/about'
}

È un hook, quindi si applicano le regole che già conosci: funziona solo in un componente il cui file inizia con 'use client'. È proprio per questo che una barra di navigazione è di solito uno dei pochi componenti client in un'app altrimenti renderizzata sul server: deve essere eseguita di nuovo a ogni cambio di percorso.

Da lì è un semplice confronto:

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

Nota dove si trova la navigazione: nel layout. Viene renderizzata una volta e rimane presente a ogni navigazione, quindi è il cambiamento di pathname a farla renderizzare di nuovo, non un nuovo montaggio.

Sfida

Facile

La barra di navigazione funziona, ma non mostra quale pagina stai visualizzando. Sistemala in components/Nav.jsx.

Chiama usePathname() e memorizzalo in pathname.
Assegna a ogni link la className "nav-link active" quando il suo href corrisponde a pathname, e "nav-link" negli altri casi.

Il link Home punta a /, il link Menu a /menu.

Provalo tu

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