Yuvalanmış Düzenler

Coddy'nin React Journey'sinin Next.js Temel Esasları bölümünün bir parçası. Ders 13 / 47.

Kök düzen tek düzen değildir. Herhangi bir klasöre bir layout.jsx bırakın; bu, o klasörün rotalarını ve yalnızca onları kapsar.

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

/menu/pizza adresini ziyaret edin ve Next.js bunları dıştan içe doğru iç içe yerleştirir:

RootLayout
    MenuLayout
        PizzaPage

/ adresini ziyaret et; yalnızca kök yerleşim çalışır: menü yerleşimi bu URL'nin yolunda olmadığı için hiç görünmez.

İç içe geçmiş bir layout, tıpkı kök düzen gibi yazılır; tek farkı kabuk kısmıdır: <html> yok, <body> yok. Yalnızca children alan bir bileşendir.

Bir sitenin tek bir bölümünün, mevcut URL hakkında tek bir if ifadesi bile olmadan kendi kenar çubuğuna, kendi sekmelerine ve kendi başlığına bu şekilde sahip olması sağlanır.

Görev

Kolay

Menü bölümünün kendi başlığına ihtiyacı var: /menu ve onun dish sayfalarında, ancak başka hiçbir yerde değil.

app/menu/layout.jsx zaten mevcut ve children ifadesini doğrudan geçiriyor. <section> içinde, {children} öğesinin üstüne şunları ekleyin:

id="menu-header" değerine ve Menu metnine sahip bir <h2>

Testler, başlığın /menu ve /menu/pizza sayfalarında göründüğünü, ancak / konumuna geri dönüldüğünde yok olduğunu kontrol eder.

Kendin dene

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}