Parallel Routes

1
export default function DashboardLayout({
2
  children,
3
  analytics,
4
  team,
5
}: {
6
  children: React.ReactNode;
7
  analytics: React.ReactNode;
8
  team: React.ReactNode;
9
}) {
10
  return (
11
    <div className="grid grid-cols-2 gap-4">
12
      <main>{children}</main>
13
      // !mark
14
      <aside>{analytics}</aside>
15
      // !mark
16
      <aside>{team}</aside>
17
    </div>
18
  );
19
}

Slot Structure

Demo

1. Switch tabs in one slot and observe the other slot stays unchanged.
2. Use browser back/forward — each slot maintains independent history.
3. Refresh the page — notice default content renders for unmatched slots.

Visual Summary

Key Takeaways

Pitfalls and Tips

• Always provide default.tsx files to prevent rendering errors on hard refresh.
• Keep slot logic focused; avoid complex dependencies between slots.
• Use parallel routes when UI sections have truly independent navigation needs.

Learn More

• Parallel Routes
• Conditional Routes