Bygga en Gemensam Layoutkomponent
Låt oss utforma en layout för hela applikationen. I detta scenario skapar vi en komponent som underlättar navigering mellan appens sidor och även ger möjlighet att logga ut (mer om auktorisering i kommande kapitel).
Tillbaka till projektet
Nu genererar vi en layout.tsx för dashboarden. Skapa en ny fil med namnet /dashboard i mappen layout.tsx och lägg in följande kod:
I denna kod sker några viktiga moment. Låt oss titta närmare:
- Vi importerar
<SideNav />-komponenten och gör den till en del av vår layout. Alla komponenter vi importerar här blir en del av den övergripande sidstrukturen; <Layout />-komponenten har enchildren-prop. Detta "barn" kan vara antingen en sida eller en annan layout. Sidorna som finns i/dashboardplaceras automatiskt inom en<Layout />.
Försök nu att följa länken http://localhost:3000/dashboard och navigera mellan dashboarden och fakturasidan.
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
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.08Bygga en Gemensam Layoutkomponent
Svep för att visa menyn
Låt oss utforma en layout för hela applikationen. I detta scenario skapar vi en komponent som underlättar navigering mellan appens sidor och även ger möjlighet att logga ut (mer om auktorisering i kommande kapitel).
Tillbaka till projektet
Nu genererar vi en layout.tsx för dashboarden. Skapa en ny fil med namnet /dashboard i mappen layout.tsx och lägg in följande kod:
I denna kod sker några viktiga moment. Låt oss titta närmare:
- Vi importerar
<SideNav />-komponenten och gör den till en del av vår layout. Alla komponenter vi importerar här blir en del av den övergripande sidstrukturen; <Layout />-komponenten har enchildren-prop. Detta "barn" kan vara antingen en sida eller en annan layout. Sidorna som finns i/dashboardplaceras automatiskt inom en<Layout />.
Försök nu att följa länken http://localhost:3000/dashboard och navigera mellan dashboarden och fakturasidan.
Tack för dina kommentarer!
