Tu Estructura de Carpetas ES Tu Enrutador

En los frameworks tradicionales, defines las rutas en un archivo de configuración — mapeando URLs a componentes. SvelteKit adopta un enfoque diferente: tu estructura de carpetas dentro de src/routes se convierte directamente en tu estructura de URLs. Crea una carpeta, obtén una ruta.

Lo Que Aprenderás

Cómo SvelteKit mapea carpetas a URLs
El rol de los archivos +page.svelte
Por qué este enfoque simplifica el desarrollo

El Modelo Mental

Piensa en la carpeta src/routes como la estructura de URLs de tu sitio web:

src/routes/
├── +page.svelte         → /
├── about/
│   └── +page.svelte     → /about
├── services/
│   └── +page.svelte     → /services
└── contact/
    └── +page.svelte     → /contact

Cada carpeta se convierte en un segmento de URL. Cada archivo +page.svelte se convierte en el contenido de la página para esa URL.

Las Reglas

El enrutamiento de SvelteKit sigue tres reglas simples:

Regla 1: Las carpetas crean segmentos de URL

Una carpeta llamada about crea la ruta /about. Una carpeta llamada services crea /services. Las carpetas anidadas crean rutas anidadas — services/pricing se convierte en /services/pricing.

Regla 2: +page.svelte renderiza la página

El archivo +page.svelte contiene el componente que se renderiza cuando alguien visita esa ruta. Sin este archivo, la ruta no existe como una página que se pueda visitar.

Regla 3: El +page.svelte raíz es tu página de inicio

El +page.svelte ubicado directamente dentro de src/routes (no en ninguna subcarpeta) se renderiza en / — la página de inicio de tu sitio.

¿Por Qué el Enrutamiento Basado en Archivos?

Si vienes de React Router o Vue Router, quizás te preguntes por qué SvelteKit usa este enfoque.

Sin deriva de configuración. Tus rutas son tus archivos. No puedes olvidar registrar una ruta porque crear el archivo es registrar la ruta.

Claridad visual. Con solo mirar tu estructura de carpetas puedes ver todas las páginas de tu app. Los nuevos integrantes del equipo pueden entender la estructura de tu sitio de inmediato.

Colocalización. Cada carpeta de ruta puede contener su página, la lógica de carga de datos y los archivos relacionados — todo lo correspondiente a esa ruta vive junto.

¿Qué Hay de BookIt?

Por ahora, BookIt solo tiene una página de inicio. Al finalizar este módulo, tendrás:

src/routes/
├── +page.svelte              → / (Welcome to BookIt)
├── services/
│   ├── +page.svelte          → /services (Browse all services)
│   └── [slug]/
│       └── +page.svelte      → /services/lawn-mowing (Service detail)
├── about/
│   └── +page.svelte          → /about
└── contact/
    └── +page.svelte          → /contact

Los usuarios podrán navegar entre páginas para explorar tu plataforma de reservas.

Errores Comunes

Olvidar `+page.svelte`

src/routes/
└── about/
    └── About.svelte    ← This won't work!

SvelteKit busca específicamente +page.svelte. Un archivo llamado About.svelte no creará una ruta — es simplemente un archivo de componente que podría importarse en otro lugar.

src/routes/
└── about/
    └── +page.svelte    ← Correct!

El prefijo + es intencional. Le indica a SvelteKit (y a ti) que este archivo tiene un significado especial en el sistema de enrutamiento.

Resumen

El enrutamiento basado en archivos de SvelteKit significa que la estructura de tu proyecto es tu estructura de URLs. Crea una carpeta, agrega +page.svelte, y tendrás una ruta. Sin archivos de configuración, sin pasos de registro.

Puntos clave:

Las carpetas dentro de src/routes se convierten en segmentos de URL
Los archivos +page.svelte renderizan el contenido de la página
El prefijo + marca los archivos con comportamiento especial de enrutamiento

Próximos Pasos

Ahora que entiendes cómo funciona el enrutamiento, vamos a crear la primera página real para BookIt. Continúa con Crear Página About, donde agregaremos la ruta /about.