Grupos de layout con (group)
Agrupe rutas bajo un layout compartido sin añadir un segmento de URL mediante paréntesis
Grupos de layout con (group) es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Por qué usar grupos de layouts
A veces necesita un layout que se aplique a muchas rutas sin añadir un segmento a la URL.
Convención de carpetas
Rodee los nombres de las carpetas con paréntesis para crear un grupo de layouts: (marketing).
src/routes/(marketing)/+layout.svelte
src/routes/(marketing)/about/+page.svelte
src/routes/(marketing)/pricing/+page.svelteLas URL no cambian
Los paréntesis no aparecen en la URL. /about y /pricing permanecen igual, pero comparten el layout.
Varios grupos
Puede tener grupos separados (marketing) y (app), cada uno con un layout diferente.
Caso de uso
Páginas de marketing (encabezado, hero) frente a páginas de la aplicación (barra lateral, navegación del dashboard) que comparten el mismo dominio.
Sin grupos
Sin grupos, tendría que añadir subcarpetas a la URL o repetir el marcado del layout.
Hooks a nivel de grupo
Los grupos pueden tener +layout.js y +layout.server.js, igual que los layouts normales.
Anidar grupos
Los grupos pueden anidarse dentro de otros grupos para una especialización mayor.
Páginas de error por grupo
Cada grupo puede tener su propio +error.svelte para mostrar una interfaz de error personalizada.
Refactorización
Traslade los layouts compartidos a un grupo cuando se encuentre repitiendo layouts entre carpetas hermanas.
Migración
Mover una ruta a un grupo solo cambia el layout, no la URL.
Comprobación rápida
¿Qué función cumplen los paréntesis en los nombres de las carpetas?
Resumen
Rodee las carpetas con paréntesis para crear grupos de layouts que compartan la interfaz sin añadir segmentos a la URL.
Preguntas frecuentes
¿La lección «Grupos de layout con (group)» es gratis?
Sí — el texto completo de «Grupos de layout con (group)» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Grupos de layout con (group)»?
Agrupe rutas bajo un layout compartido sin añadir un segmento de URL mediante paréntesis Practicas Sveltejs Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Sveltejs Academy?
No se requiere experiencia previa. Sveltejs Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Grupos de layout con (group)»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Sveltejs Academy?
Sí. Cada lección de Sveltejs Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Grupos de layout con (group)
- Layouts a nivel de ruta
- Salir de un layout con +page@route
- Datos compartidos entre layouts