Erstellen Eines Gemeinsamen Layouts
Gestalten wir ein Layout für die gesamte App. In diesem Szenario erstellen wir eine Komponente, die beim Navigieren durch die Seiten der App hilft und auch die Möglichkeit bietet, sich abzumelden (mehr zur Autorisierung in den kommenden Kapiteln).
Zurück zum Projekt
Nun, lassen Sie uns ein layout.tsx für das Dashboard erstellen. Erstellen Sie innerhalb des /dashboard-Ordners eine neue Datei namens layout.tsx und fügen Sie den folgenden Code ein:
In diesem Code passieren einige wichtige Aktionen. Werfen wir einen genaueren Blick darauf:
- Wir bringen die
<SideNav />-Komponente ein und machen sie zu einem Teil unseres Layouts. Alle Komponenten, die wir hier importieren, werden Teil des gesamten Seitendesigns; - Die
<Layout />-Komponente hat einechildren-Eigenschaft. Dieses "Kind" kann entweder eine Seite oder ein anderes Layout sein. Insbesondere die Seiten, die sich in/dashboardbefinden, werden automatisch innerhalb eines<Layout />platziert.
Versuchen Sie nun, dem Link http://localhost:3000/dashboard zu folgen und zwischen dem Dashboard und der Rechnungsseite zu navigieren.
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
What does the SideNav component do in this layout?
Can you explain how the children prop works in the Layout component?
How does navigation between dashboard and invoices work with this layout?
Awesome!
Completion rate improved to 2.08Erstellen Eines Gemeinsamen Layouts
Swipe um das Menü anzuzeigen
Gestalten wir ein Layout für die gesamte App. In diesem Szenario erstellen wir eine Komponente, die beim Navigieren durch die Seiten der App hilft und auch die Möglichkeit bietet, sich abzumelden (mehr zur Autorisierung in den kommenden Kapiteln).
Zurück zum Projekt
Nun, lassen Sie uns ein layout.tsx für das Dashboard erstellen. Erstellen Sie innerhalb des /dashboard-Ordners eine neue Datei namens layout.tsx und fügen Sie den folgenden Code ein:
In diesem Code passieren einige wichtige Aktionen. Werfen wir einen genaueren Blick darauf:
- Wir bringen die
<SideNav />-Komponente ein und machen sie zu einem Teil unseres Layouts. Alle Komponenten, die wir hier importieren, werden Teil des gesamten Seitendesigns; - Die
<Layout />-Komponente hat einechildren-Eigenschaft. Dieses "Kind" kann entweder eine Seite oder ein anderes Layout sein. Insbesondere die Seiten, die sich in/dashboardbefinden, werden automatisch innerhalb eines<Layout />platziert.
Versuchen Sie nun, dem Link http://localhost:3000/dashboard zu folgen und zwischen dem Dashboard und der Rechnungsseite zu navigieren.
Danke für Ihr Feedback!
