| 1 | import { ExternalLink } from "@/app/_ui/external-link"; |
| 2 | |
| 3 | export default function Page() { |
| 4 | return ( |
| 5 | <div className="prose prose-sm prose-invert max-w-none"> |
| 6 | <h1 className="text-xl font-bold">Route Groups</h1> |
| 7 | |
| 8 | <ul> |
| 9 | <li> |
| 10 | This example uses Route Groups to create layouts for different |
| 11 | sections of the app without affecting the URL structure. |
| 12 | </li> |
| 13 | <li> |
| 14 | Try navigating pages and noting the different layouts used for each |
| 15 | section. |
| 16 | </li> |
| 17 | <li>Route groups can be used to:</li> |
| 18 | <ul> |
| 19 | <li>Opt a route segment out of a shared layout.</li> |
| 20 | <li>Organize routes without affecting the URL structure.</li> |
| 21 | <li> |
| 22 | Create multiple root layouts by partitioning the top level of the |
| 23 | application. |
| 24 | </li> |
| 25 | </ul> |
| 26 | </ul> |
| 27 | |
| 28 | <div className="flex gap-2"> |
| 29 | <ExternalLink href="https://nextjs.org/docs/app/building-your-application/routing/route-groups"> |
| 30 | Docs |
| 31 | </ExternalLink> |
| 32 | <ExternalLink href="https://github.com/vercel/app-playground/tree/main/app/route-groups"> |
| 33 | Code |
| 34 | </ExternalLink> |
| 35 | </div> |
| 36 | </div> |
| 37 | ); |
| 38 | } |