Capítulo 134 de 456

Route Groups

Core Idea

Convenção de pasta (folderName) que organiza rotas por categoria/time sem afetar a URL, permitindo múltiplos root layouts ou compartilhamento seletivo de layout.

Key Concepts

  • (folderName): pasta entre parênteses é ignorada no path da URL final.
  • Múltiplos root layouts: cada route group pode ter seu próprio layout.js raiz.
  • Full page load entre root layouts: navegar entre rotas com root layouts diferentes força reload completo da página.

Code Examples

app/
├── (marketing)/
│   ├── layout.tsx
│   └── about/page.tsx
├── (shop)/
│   ├── layout.tsx
│   └── cart/page.tsx
  • O que demonstra: (marketing) e (shop) isolam layouts diferentes sem aparecer na URL (/about, /cart).

Anti-patterns

  • Rotas em grupos diferentes resolvendo para a mesma URL: (marketing)/about/page.js e (shop)/about/page.js colidem em /about e causam erro de build.
  • Múltiplos root layouts sem layout.js de topo, e sem colocar a home dentro de um grupo: a rota / precisa estar definida dentro de um dos route groups (ex.: app/(marketing)/page.js).

Key Takeaways

  1. Route Groups são só organizacionais: não mudam a URL, servem para separar por time/feature ou para dar layouts raiz distintos a seções do app.
  2. Navegação entre seções com root layouts diferentes é sempre um full page load, não uma transição client-side.
  3. Planeje as URLs cuidadosamente para evitar colisão de paths entre grupos diferentes.

Connects To

  • layout.js (root layout): cada route group pode definir o seu próprio.
  • Parallel Routes: outra convenção de organização de pastas (@slot) que também não afeta a URL.
AnteriorruntimePróximosrc