Riepilogo: routing
Fa parte della sezione Nozioni essenziali di Next.js del percorso React di Coddy. Lezione 10 di 47.
Sfida
MedioRiepilogo del capitolo: trasforma un'app di una sola pagina in un piccolo sito, usando tutto ciò che hai imparato in questo capitolo.
- In
app/about/page.jsx(già presente nell'elenco dei file), fai in modo che il componente restituisca un<h1>conid="about-title"e il testo esattoAbout us. - In
app/page.jsx, importaLinkdanext/linke aggiungi un link a/aboutconid="to-about". - La route dinamica
app/menu/[slug]/page.jsxè già presente, ma mostra semprepizza. Rendi il componenteasync, in modo che attendaparamse visualizzi loslugcorrispondente all'interno di un<h1>conid="dish".
I test fanno clic sul tuo link, poi visitano due piatti diversi e si aspettano due intestazioni diverse.
Provalo tu
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{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