Riepilogo: navigazione
Fa parte della sezione Nozioni essenziali di Next.js del percorso React di Coddy. Lezione 38 di 47.
Sfida
MedioRiepilogo del capitolo: una piccola app, entrambe le direzioni dell’URL: una barra di navigazione che legge dove si trova e una pagina del menu filtrata dalla stringa di query.
- In
components/Nav.jsx, chiamausePathname()e assegna a ogni link la className"nav-link active"quando il suohrefcorrisponde al percorso corrente, e"nav-link"semplice altrimenti. Home è/, Menu è/menu. - In
app/menu/page.jsx, leggicategorydasearchParams(ricorda che è una promise) e mostra solo i piatti corrispondenti, oppure tutti se non viene indicata alcuna categoria.
/menu?category=pizza dovrebbe mostrare 2 dei 4 piatti, con il link Menu evidenziato.
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>
);
}Tutte le lezioni di Nozioni essenziali di Next.js
4Server e Client
Due tipi di componentiLeggere l'erroreLa riga 'use client'Mantieni piccole le parti ClientServer dentro ClientRiepilogo: Server e Client7Navigazione lato client
Il link attivoRouting programmaticoFiltrare con l'URLGestori delle routeRiepilogo: navigazione2Routing e collegamenti
Le cartelle sono routeRoute annidateCollegare le pagineRoute dinamichePagine non trovateRiepilogo: routing5Dati sul server
Componenti asincroniIn attesa dei parametri della routeDue fetch contemporaneiStati di caricamentoGestione degli erroriRiepilogo: recupero dei dati8Progetto: Coddy Eats
Passaggio 1: La struttura
Passaggio 2: La griglia del menuPassaggio 3: Le pagine dei piattiPassaggio 4: Stato di caricamentoPassaggio 5: Titoli delle paginePassaggio 6: Aggiungi al carrelloPassaggio 7: Filtro per categoriaPassaggio 8: Lascia una recensionePassaggio 9: Ricerca in tempo reale