Una Ruta, Muchas Páginas

Crear una carpeta para cada servicio sería tedioso — e imposible si los servicios se agregan dinámicamente. SvelteKit resuelve esto con rutas dinámicas: una definición de ruta que coincide con múltiples URLs basándose en un parámetro.

Lo Que Aprenderás

Crear rutas dinámicas con la sintaxis [parameter]
Acceder a los parámetros de ruta en tu componente
Construir páginas de detalle de servicios para BookIt

El Problema

BookIt tiene múltiples servicios. Cada uno necesita su propia página:

/services/lawn-mowing — Detalles de Corte de Césped
/services/hedge-trimming — Detalles de Poda de Setos
/services/garden-consultation — Detalles de Consultoría de Jardín

Crear una carpeta separada para cada servicio no escala. ¿Qué pasa cuando tienes 50 servicios? ¿500?

La Solución: Parámetros Dinámicos

En lugar de crear services/lawn-mowing/, services/hedge-trimming/, etc., creas una sola carpeta con un parámetro:

src/routes/services/[slug]/
└── +page.svelte

Los corchetes [slug] le indican a SvelteKit que este segmento es dinámico. Coincidirá con cualquier valor:

/services/lawn-mowing ✓
/services/hedge-trimming ✓
/services/anything-at-all ✓

El valor real (lawn-mowing, hedge-trimming, etc.) queda disponible como un parámetro en tu componente.

Crear la Ruta de Detalle de Servicio

Paso 1: Crear la Carpeta Dinámica

Dentro de src/routes/services/, crea una carpeta llamada [slug]:

src/routes/
├── services/
│   ├── +page.svelte       (services listing)
│   └── [slug]/            ← Create this folder
│       └── +page.svelte   ← And this file

El nombre de la carpeta debe incluir los corchetes. Se llama literalmente [slug].

Paso 2: Acceder al Parámetro

Crea +page.svelte dentro de [slug]:

<!-- filename: src/routes/services/[slug]/+page.svelte -->
<script>
  let { data } = $props();
</script>

<h1>Service: {data.slug}</h1>
<p>You're viewing the detail page for: {data.slug}</p>

Espera — ¿de dónde viene data.slug? ¡Estoy obteniendo un ERROR en slug! No te preocupes, ya que lo cargaremos en el siguiente paso.

Paso 3: Agregar una Función de Carga

Las rutas dinámicas típicamente necesitan una función de carga para acceder al parámetro. Crea +page.js en la misma carpeta:

// filename: src/routes/services/[slug]/+page.js
export function load({ params }) {
  return {
    slug: params.slug
  };
}

El objeto params contiene todos los segmentos dinámicos de la URL. Como nuestra carpeta es [slug], accedemos a params.slug. Cubriremos la función load más adelante durante el curso.

Paso 4: Probarlo

Visita estas URLs:

http://localhost:5173/services/lawn-mowing
http://localhost:5173/services/hedge-trimming
http://localhost:5173/services/test-123

Cada una debería mostrar "Service: lawn-mowing", "Service: hedge-trimming", etc.

Construir una Página de Detalle Real

Mostrar solo el slug no es útil. Mostremos información real del servicio. Necesitamos simular una fuente de datos. Por ahora, volveremos a escribir los datos del servicio de forma fija, pero esta vez en +page.js. No olvides también retornar services desde la función de carga.

Actualiza +page.js para encontrar el servicio:

// filename: src/routes/services/[slug]/+page.js
const services = [
  {
    id: '1',
    slug: 'lawn-mowing',
    name: 'Lawn Mowing',
    description: 'Professional lawn mowing service for residential properties.',
    price: 50,
    duration: 60
  },
  {
    id: '2',
    slug: 'hedge-trimming',
    name: 'Hedge Trimming',
    description: 'Expert hedge and shrub trimming to keep your garden tidy.',
    price: 75,
    duration: 90
  },
  {
    id: '3',
    slug: 'garden-consultation',
    name: 'Garden Consultation',
    description: 'One-on-one consultation for garden planning and advice.',
    price: 100,
    duration: 60
  }
];

export function load({ params }) {
  const service = services.find(s => s.slug === params.slug);
  
  return {
    slug: params.slug,
    // Return the found service (or null if not found)
    service: service || null
  };
}

Ahora actualiza la página para mostrar los detalles del servicio:

<!-- filename: src/routes/services/[slug]/+page.svelte -->
<script>
  let { data } = $props();
</script>

{#if data.service}
  <h1>{data.service.name}</h1>
  <p>{data.service.description}</p>
  
  <dl>
    <dt>Price</dt>
    <dd>${data.service.price}</dd>
    
    <dt>Duration</dt>
    <dd>{data.service.duration} minutes</dd>
  </dl>
  
  <button>Book Now</button>
{:else}
  <h1>Service Not Found</h1>
  <p>Sorry, we couldn't find a service matching "{data.slug}".</p>
{/if}

Entendiendo el Flujo de Datos

Esto es lo que sucede cuando alguien visita /services/lawn-mowing:

SvelteKit hace coincidir la URL con services/[slug]/+page.svelte
La función load en +page.js se ejecuta con params.slug = 'lawn-mowing'
load encuentra el servicio y lo retorna
El componente de página recibe data.service mediante props
La plantilla renderiza los detalles del servicio

Esta separación — cargar datos en +page.js, renderizar en +page.svelte — es un patrón central de SvelteKit que exploraremos en profundidad en el Módulo 9.

La Estructura de Tu Proyecto

src/routes/
├── +page.svelte              → /
├── services/
│   ├── +page.svelte          → /services
│   └── [slug]/
│       ├── +page.js          ← Load function (new!)
│       └── +page.svelte      → /services/* (dynamic)
├── about/
│   └── +page.svelte          → /about
└── contact/
    └── +page.svelte          → /contact

Errores Comunes

Olvidar los Corchetes

src/routes/services/
└── slug/
    └── +page.svelte    → /services/slug (literal!)

Sin corchetes, slug se trata como un segmento de ruta literal. Solo /services/slug coincidiría — no /services/lawn-mowing.

src/routes/services/
└── [slug]/
    └── +page.svelte    → /services/* (any value)

Nombre de Parámetro Incorrecto

// Folder is [slug], but accessing wrong parameter name
export function load({ params }) {
  return { id: params.id };  // ❌ undefined — should be params.slug
}

El nombre del parámetro en params coincide con el nombre de la carpeta. [slug] te da params.slug, [id] te daría params.id.

No Manejar Datos Faltantes

Siempre maneja el caso en que ningún servicio coincida:

{#if data.service}
  <!-- Show service -->
{:else}
  <!-- Show error state -->
{/if}

Sin esta verificación, visitar /services/nonexistent fallaría al intentar acceder a propiedades de undefined.

Resumen

Las rutas dinámicas te permiten crear una única definición de página que maneja muchas URLs. La sintaxis de carpeta [parameter] captura el segmento de la URL como un valor que puedes usar para cargar datos específicos.

Puntos clave:

Los corchetes [name] crean segmentos de ruta dinámicos
Accede a los parámetros mediante params.name en las funciones de carga
Siempre maneja los casos en que el parámetro no coincide con datos válidos

Próximos Pasos

Ahora tenemos múltiples páginas, pero no hay forma de navegar entre ellas sin escribir las URLs. Continúa con Vincular Todas las Páginas para agregar navegación adecuada en toda la aplicación BookIt.