Grupos de layout com (group)
Agrupe rotas sob um layout compartilhado sem adicionar um segmento à URL usando parênteses.
Grupos de layout com (group) é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.
Por que usar grupos de leiaute
Às vezes, é necessário um leiaute que se aplique a muitas rotas sem adicionar um segmento à URL.
Convenção de pastas
Coloque os nomes das pastas entre parênteses para criar um grupo de leiaute: (marketing).
src/routes/(marketing)/+layout.svelte
src/routes/(marketing)/about/+page.svelte
src/routes/(marketing)/pricing/+page.svelteURLs permanecem limpas
Os parênteses não aparecem na URL. /about e /pricing permanecem como estão, mas compartilham o leiaute.
Vários grupos
Você pode ter grupos (marketing) e (app) separados, com leiautes diferentes.
Caso de uso
Páginas de marketing (cabeçalho, destaque) e páginas do aplicativo (barra lateral, navegação do painel) compartilhando o mesmo domínio.
Sem grupos
Sem grupos, seria necessário adicionar subpastas à URL ou repetir a marcação do leiaute.
Ganchos no nível do grupo
Os grupos podem ter +layout.js e +layout.server.js, assim como os leiautes normais.
Aninhamento de grupos
Os grupos podem ser aninhados em outros grupos para uma especialização ainda maior.
Páginas de erro por grupo
Cada grupo pode ter seu próprio +error.svelte para uma interface de falha personalizada.
Refatoração
Promova os leiautes compartilhados para um grupo quando perceber que está repetindo leiautes entre pastas irmãs.
Migração
Mover uma rota para um grupo altera somente o leiaute, não a URL.
Verificação rápida
O que os parênteses fazem nos nomes das pastas?
Recapitulação
Coloque as pastas entre parênteses para criar grupos de leiaute que compartilham a interface sem adicionar segmentos à URL.
Perguntas Frequentes
A aula “Grupos de layout com (group)” é grátis?
Sim — o texto completo de “Grupos de layout com (group)” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.
O que vou aprender em “Grupos de layout com (group)”?
Agrupe rotas sob um layout compartilhado sem adicionar um segmento à URL usando parênteses. Você pratica Sveltejs Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Sveltejs Academy?
Nenhuma experiência prévia é necessária. Sveltejs Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Grupos de layout com (group)”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Sveltejs Academy?
Sim. Cada aula de Sveltejs Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Grupos de layout com (group)
- Layouts no nível da rota
- Saindo de um layout com +page@route
- Dados compartilhados entre layouts