Erstellung Einer Gemeinsamen Layout-Komponente
Entwurf eines Layouts für die gesamte Anwendung. In diesem Szenario wird eine Komponente erstellt, die die Navigation durch die Seiten der Anwendung unterstützt und zudem die Möglichkeit zum Ausloggen bietet (weitere Informationen zur Autorisierung folgen in den nächsten Kapiteln).
Zurück zum Projekt
Nun wird eine layout.tsx
für das Dashboard generiert. Im Verzeichnis /dashboard
eine neue Datei mit dem Namen layout.tsx
anlegen und den folgenden Code einfügen:
In diesem Code finden einige wichtige Aktionen statt. Eine genauere Betrachtung:
- Die Komponente
<SideNav />
wird eingebunden und ist Teil des Layouts. Alle Komponenten, die hier importiert werden, sind Bestandteil des gesamten Seitendesigns; - Die Komponente
<Layout />
verfügt über einechildren
-Prop. Dieses "Child" kann entweder eine Seite oder ein weiteres Layout sein. Insbesondere werden die Seiten im Verzeichnis/dashboard
automatisch innerhalb eines<Layout />
platziert.
Versuchen Sie nun, dem Link http://localhost:3000/dashboard zu folgen und zwischen der 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
Can you explain how the SideNav component works?
What happens if I add more pages to the /dashboard directory?
How does the children prop get populated in this layout?
Awesome!
Completion rate improved to 2.08
Erstellung Einer Gemeinsamen Layout-Komponente
Swipe um das Menü anzuzeigen
Entwurf eines Layouts für die gesamte Anwendung. In diesem Szenario wird eine Komponente erstellt, die die Navigation durch die Seiten der Anwendung unterstützt und zudem die Möglichkeit zum Ausloggen bietet (weitere Informationen zur Autorisierung folgen in den nächsten Kapiteln).
Zurück zum Projekt
Nun wird eine layout.tsx
für das Dashboard generiert. Im Verzeichnis /dashboard
eine neue Datei mit dem Namen layout.tsx
anlegen und den folgenden Code einfügen:
In diesem Code finden einige wichtige Aktionen statt. Eine genauere Betrachtung:
- Die Komponente
<SideNav />
wird eingebunden und ist Teil des Layouts. Alle Komponenten, die hier importiert werden, sind Bestandteil des gesamten Seitendesigns; - Die Komponente
<Layout />
verfügt über einechildren
-Prop. Dieses "Child" kann entweder eine Seite oder ein weiteres Layout sein. Insbesondere werden die Seiten im Verzeichnis/dashboard
automatisch innerhalb eines<Layout />
platziert.
Versuchen Sie nun, dem Link http://localhost:3000/dashboard zu folgen und zwischen der Dashboard- und der Rechnungsseite zu navigieren.


Danke für Ihr Feedback!