Route Groups

1
// Routes: /about, /blog, /contact
2
export default function MarketingLayout({
3
  children,
4
}: {
5
  children: React.ReactNode;
6
}) {
7
  return (
8
    <div className="marketing-shell">
9
      // !mark
10
      <MarketingHeader />
11
      {children}
12
    </div>
13
  );
14
}

1
// Routes: /products, /cart, /checkout
2
export default function ShopLayout({
3
  children,
4
}: {
5
  children: React.ReactNode;
6
}) {
7
  return (
8
    <div className="shop-shell">
9
      // !mark
10
      <ShopHeader />
11
      {children}
12
    </div>
13
  );
14
}

Demo

1. Navigate between marketing and shop pages — notice different layouts for each section.
2. Check the URLs — the group name (marketing) or (shop) never appears.
3. Visit checkout — see a layout that opts out of the main navigation shell.

Visual Summary

Key Takeaways

Pitfalls and Tips

• Avoid deeply nested groups; keep the structure shallow and meaningful.
• Use descriptive group names that reflect the purpose, not the URL.
• Remember that routes across groups can still share common parent layouts above the groups.

Learn More

• Route Groups
• Multiple Root Layouts