Активная ссылка

Часть раздела Основы 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'
}

Это хук, поэтому здесь действуют уже знакомые вам правила: он работает только в компоненте, файл которого начинается с 'use client'. В этом и заключается причина, почему nav-бар обычно является одним из немногих client-компонентов в остальном серверном приложении: он должен перезапускаться при каждом изменении маршрута.

Отсюда следует простое сравнение:

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

Обратите внимание, где находится nav: в **layout**. Он рендерится один раз и сохраняется при каждом переходе, поэтому именно изменение pathname вызывает его повторный рендер, а не повторное монтирование (remount).

Задание

Легко

Панель навигации работает, но ничто не показывает, на какой странице вы находитесь. Исправьте это в 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>
    );
}