Итоги: Навигация
Часть раздела Основы Next.js путешествия по React на Coddy — урок 38 из 47.
Задание
СреднеИтог главы: одно небольшое приложение, оба направления URL: навигация, которая читает, где она находится, и страница меню, отфильтрованная по строке запроса.
- В
components/Nav.jsxвызовитеusePathname()и задайте каждой ссылке className"nav-link active", когда еёhrefсовпадает с текущим путем, и обычный"nav-link"в противном случае. Home — это/, Menu — это/menu. - В
app/menu/page.jsxпрочтитеcategoryизsearchParams(помните, что это promise) и покажите только подходящие блюда или все из них, если категория не указана.
/menu?category=pizza должно показывать 2 из 4 блюд с выделенной ссылкой 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>
);
}Все уроки раздела Основы Next.js
4Сервер и клиент
Два типа компонентовЧтение ошибкиДиректива 'use client'Минимизация клиентских частейСерверный компонент внутри клиентскогоИтоги: Сервер и клиент7Клиентская навигация
Активная ссылкаПрограммный маршрутизацияФильтрация с помощью URLОбработчики маршрутовИтоги: Навигация