Zusammenfassung: Routing
Teil des Abschnitts Next.js Essentials der React-Journey von Coddy — Lektion 10 von 47.
Aufgabe
MittelKapitelzusammenfassung: Wandle eine einseitige App in eine kleine Website um, indem du alles aus diesem Kapitel verwendest.
- Erstelle
app/about/page.jsx. Exportiere alsdefaulteine Komponente, die ein<h1>mitid="about-title"und dem exakten TextAbout uszurückgibt. - In
app/page.jsx,importiereLinkausnext/linkund füge einen Link zu/aboutmitid="to-about"hinzu. - Erstelle die dynamische Route
app/menu/[slug]/page.jsx: eineasync-Komponente, die aufparamswartet (await) und den passendensluginnerhalb eines<h1>mitid="dish"rendert.
Die Tests klicken auf deinen Link, besuchen dann zwei verschiedene Gerichte und erwarten zwei verschiedene Überschriften.
Probier es selbst
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}Alle Lektionen in Next.js Essentials
4Server & Client
Zwei Arten von KomponentenDen Fehler lesenDie 'use client'-ZeileClient-Teile klein haltenServer innerhalb von ClientZusammenfassung: Server & Client7Client-seitige Navigation
Der aktive LinkProgrammatisches RoutingFiltern mit der URLRoute-HandlerZusammenfassung: Navigation2Routing & Links
Ordner sind RoutenVerschachtelte RoutenSeiten verlinkenDynamische RoutenNicht-gefunden-SeitenZusammenfassung: Routing