Zagnieżdżone układy

Część sekcji Podstawy Next.js ścieżki React w Coddy. Lekcja 13 z 47.

Układ główny nie jest jedynym. Umieść plik layout.jsx w dowolnym folderze, a będzie on obejmował trasy tego folderu i tylko te trasy.

app/
    layout.jsx          wraps EVERYTHING
    page.jsx            /
    menu/
        layout.jsx      wraps /menu and everything under it
        page.jsx        /menu
        pizza/
            page.jsx    /menu/pizza

Odwiedź /menu/pizza, a Next.js zagnieżdża je od zewnątrz do środka:

RootLayout
    MenuLayout
        PizzaPage

Odwiedź / — uruchomi się tylko główny układ: układ menu nie znajduje się w ścieżce tego adresu URL, więc nigdy się nie pojawi.

Układ zagnieżdżony zapisuje się dokładnie tak samo jak główny, ale bez szkieletu: bez <html> i bez <body>. To po prostu komponent przyjmujący children.

W ten sposób jedna sekcja witryny zyskuje własny pasek boczny, własne karty i własny nagłówek, bez ani jednej instrukcji if dotyczącej bieżącego adresu URL.

Wyzwanie

Łatwy

Sekcja menu potrzebuje własnego nagłówka: na stronie /menu i stronach dań, ale nigdzie indziej.

app/menu/layout.jsx już istnieje i przekazuje children bezpośrednio dalej. Wewnątrz <section>, powyżej {children}, dodaj:

<h2> z id="menu-header" i tekstem Menu

Testy sprawdzają, czy nagłówek wyświetla się na stronie /menu i na stronie /menu/pizza, a także czy znika po powrocie na stronę /.

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>
    );
}