Podsumowanie: nawigacja
Część sekcji Podstawy Next.js ścieżki React w Coddy. Lekcja 38 z 47.
Wyzwanie
ŚredniPodsumowanie rozdziału: jedna mała aplikacja, oba kierunki URL-a: nawigacja, która odczytuje, gdzie się znajduje, oraz strona menu filtrowana za pomocą ciągu zapytania.
- W
components/Nav.jsxwywołajusePathname()i nadaj każdemu linkowi className"nav-link active", gdy jegohrefpasuje do bieżącej ścieżki, a w przeciwnym razie zwykłe"nav-link". Strona główna to/, a Menu to/menu. - W
app/menu/page.jsxodczytajcategoryzsearchParams(pamiętaj, że to obietnica) i pokaż tylko pasujące dania albo wszystkie, jeśli nie podano kategorii.
/menu?category=pizza powinno wyświetlać 2 z 4 dań, a link Menu powinien być wyróżniony.
Spróbuj swoich sił
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>
);
}Wszystkie lekcje w sekcji Podstawy Next.js
4Serwer i klient
Dwa rodzaje komponentówOdczytywanie błęduLinia „use client”Ograniczaj części klienckieSerwer wewnątrz klientaPodsumowanie: serwer i klient7Nawigacja po stronie klienta
Aktywny linkRouting programowyFiltrowanie za pomocą URLObsługa trasPodsumowanie: nawigacja