Podsumowanie: routing
Część sekcji Podstawy Next.js ścieżki React w Coddy. Lekcja 10 z 47.
Wyzwanie
ŚredniPodsumowanie rozdziału: zmień aplikację z jedną stroną w małą witrynę, wykorzystując wszystko z tego rozdziału.
- W
app/about/page.jsx(plik już znajduje się na liście plików) spraw, aby komponent zwracał element<h1>zid="about-title"i dokładnym tekstemAbout us. - W
app/page.jsxzaimportujLinkznext/linki dodaj link do/aboutzid="to-about". - Dynamiczna trasa
app/menu/[slug]/page.jsxjuż istnieje, ale zawsze wyświetlapizza. Spraw, aby jej komponent byłasync, czekał naparamsi renderował dopasowanyslugwewnątrz elementu<h1>zid="dish".
Testy klikają Twój link, a następnie odwiedzają dwie różne potrawy i oczekują dwóch różnych nagłówków.
Spróbuj swoich sił
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{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