Opbygning af en Fælles Layoutkomponent
Lad os designe et layout for hele appen. I dette scenarie opretter vi en komponent, der hjælper med navigation gennem appens sider og også giver mulighed for at logge ud (mere om autorisation i kommende kapitler).
Tilbage til projektet
Nu skal vi generere en layout.tsx til dashboardet. Inde i mappen /dashboard skal du oprette en ny fil med navnet layout.tsx og indsætte følgende kode:
I denne kode sker der nogle centrale handlinger. Lad os se nærmere på dem:
- Vi importerer
<SideNav />-komponenten og gør den til en del af vores layout. Alle komponenter, vi importerer her, bliver en del af det overordnede sidedesign; <Layout />-komponenten har enchildren-prop. Dette "barn" kan enten være en side eller et andet layout. Specifikt vil siderne placeret i/dashboardautomatisk blive indsat i et<Layout />.
Prøv nu at følge linket http://localhost:3000/dashboard og navigér mellem dashboardet og fakturasiden.
Tak for dine kommentarer!
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
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?
Fantastisk!
Completion rate forbedret til 2.08Opbygning af en Fælles Layoutkomponent
Stryg for at vise menuen
Lad os designe et layout for hele appen. I dette scenarie opretter vi en komponent, der hjælper med navigation gennem appens sider og også giver mulighed for at logge ud (mere om autorisation i kommende kapitler).
Tilbage til projektet
Nu skal vi generere en layout.tsx til dashboardet. Inde i mappen /dashboard skal du oprette en ny fil med navnet layout.tsx og indsætte følgende kode:
I denne kode sker der nogle centrale handlinger. Lad os se nærmere på dem:
- Vi importerer
<SideNav />-komponenten og gør den til en del af vores layout. Alle komponenter, vi importerer her, bliver en del af det overordnede sidedesign; <Layout />-komponenten har enchildren-prop. Dette "barn" kan enten være en side eller et andet layout. Specifikt vil siderne placeret i/dashboardautomatisk blive indsat i et<Layout />.
Prøv nu at følge linket http://localhost:3000/dashboard og navigér mellem dashboardet og fakturasiden.
Tak for dine kommentarer!
