Nested Layouts

1
export default function DashboardLayout({
2
  children,
3
}: {
4
  children: React.ReactNode;
5
}) {
6
  return (
7
    <div className="dashboard">
8
      {/* Persistent sidebar */}
9
      // !mark
10
      <Sidebar />
11
      {/* Child routes render here */}
12
      // !mark
13
      <main>{children}</main>
14
    </div>
15
  );
16
}

Demo

1. Navigate between categories using the tabs above (Clothing, Electronics, Sports).
2. Watch the borders — layouts animate only on first render, not on navigation.
3. Click the counter a few times, then navigate to a different category.
4. Notice the count persists — client state survives navigation.
5. Click the counter while a route loads — layouts remain interactive.

Visual Summary

Key Takeaways

Pitfalls and Tips

• Avoid putting per-page state in layouts unless it should persist across navigation.
• Keep layout components lean since they render on every page under them.
• Use the template.tsx file convention when you need UI that re-mounts on navigation.

Continue Learning

Learn More

• Layouts and Pages
• Nesting Layouts