Conecta tus Páginas

BookIt ahora tiene cinco rutas: /, /about, /contact, /services y /services/[slug], — pero los usuarios solo pueden acceder a ellas escribiendo URLs en la barra de direcciones. Así no funcionan los sitios web. Agreguemos una navegación apropiada para que los usuarios puedan moverse por la app haciendo clic.

Lo que Aprenderás

Usar etiquetas anchor estándar para la navegación
Entender la optimización automática de enlaces de SvelteKit
Agregar navegación a las páginas de BookIt
Enlazar desde la lista de servicios a los detalles de cada servicio

Cómo Funcionan los Enlaces en SvelteKit

Aquí la buena noticia: no necesitas un componente especial. Las etiquetas anchor estándar de HTML funcionan perfectamente:

<a href="/services">View Services</a>

SvelteKit intercepta automáticamente estos enlaces y maneja la navegación del lado del cliente — sin recarga completa de página, sin importaciones especiales requeridas.

Agrega Navegación a la Página de Inicio

Actualicemos la página de inicio de BookIt para enlazar a otras páginas.

<!-- filename: src/routes/+page.svelte -->
<script>
	const appName = 'BookIt'
	const tagline = 'Book your next service appointment in minutes.'
</script>

<div class="hero">
	<h1>Welcome to {appName}</h1>
	<p class="tagline">{tagline}</p>
</div>

<nav>
	<a href="/services">Browse Services</a>
	<a href="/about">About Us</a>
	<a href="/contact">Contact</a>
</nav>

<section>
	<h2>How It Works</h2>
	<ol>
		<li>Browse our available services</li>
		<li>Choose a time that works for you</li>
		<li>Confirm your booking</li>
	</ol>
	<a href="/services">Get Started →</a>
</section>

Guarda y prueba. Hacer clic en "Browse Services" debería llevarte a /services sin recargar la página. La URL cambia, el contenido se actualiza, pero se siente instantáneo.

Enlaza los Servicios a sus Páginas de Detalle

La lista de servicios debería enlazar a las páginas individuales de cada servicio. Actualiza tu página de servicios:

<!-- filename: src/routes/services/+page.svelte -->
<script>
	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
		}
	]
</script>

<h1>Our Services</h1>
<p>Browse our available services and book your appointment.</p>

<ul>
	{#each services as service}
		<li>
			<h2>
				<a href="/services/{service.slug}">{service.name}</a>
			</h2>
			<p>{service.description}</p>
			<p><strong>${service.price}</strong> · {service.duration} minutes</p>
			<a href="/services/{service.slug}">View Details →</a>
		</li>
	{/each}
</ul>

La adición clave es href="/services/{service.slug}". Esto crea enlaces como /services/lawn-mowing, /services/hedge-trimming, etc. — exactamente lo que espera nuestra ruta dinámica.

Agrega Navegación a la Página de Detalle

Las páginas de detalle de servicios deberían tener un enlace de regreso a la lista de servicios:

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

<nav>
	<a href="/services">← Back to Services</a>
</nav>

{#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}

Crea un Componente de Navegación Simple

En esencia, la navegación debería aparecer dinámicamente en cada página, con algunas excepciones. Por ahora, la agregaremos manualmente a cada página. En el siguiente módulo, presentaremos los layouts, que manejan esto de una manera más limpia y escalable.

Agrega este bloque de navegación como la primera parte del marcado HTML en cada archivo +page.svelte:

<nav>
	<a href="/">BookIt</a>
	<a href="/services">Services</a>
	<a href="/about">About</a>
	<a href="/contact">Contact</a>
</nav>

Sí, esto es repetitivo. Lo resolverás con layouts. Por ahora, funciona.

Comportamiento de los Enlaces en SvelteKit

Cuando haces clic en un enlace en SvelteKit:

SvelteKit intercepta el clic
En lugar de cargar la página completa, obtiene solo lo que cambió
La URL se actualiza en el navegador
La nueva página se renderiza instantáneamente

Este "enrutamiento del lado del cliente" hace que la navegación se sienta ágil. Pero si JavaScript no logra cargar, los enlaces siguen funcionando — se convierten en navegaciones de página regulares. Esto se llama mejora progresiva.

Cuándo los Enlaces No son Interceptados

SvelteKit no interceptará enlaces que:

Tengan un atributo target (target="_blank")
Apunten a orígenes distintos (https://external-site.com)
Tengan el atributo rel="external"
Tengan un atributo download

<!-- These navigate normally (full page load) -->
<a href="https://google.com">External Link</a>
<a href="/file.pdf" download>Download PDF</a>
<a href="/services" target="_blank">Open in New Tab</a>

Prueba tu Navegación

Con el servidor de desarrollo en ejecución, navega por BookIt:

Comienza en la página de inicio (/)
Haz clic en "Browse Services" → /services
Haz clic en el nombre de un servicio → /services/lawn-mowing
Haz clic en "Back to Services" → /services
Haz clic en "About" → /about
Haz clic en "Contact" → /contact
Haz clic en el logo "BookIt" → /

Cada clic debería ser instantáneo. Observa la barra de URL — se actualiza sin que la página parpadee o se recargue.

Errores Comunes

Barra Diagonal Inicial Faltante

<!-- ❌ Relative path — might break depending on current route -->
<a href="services">Services</a>

<!-- ✅ Absolute path — always works -->
<a href="/services">Services</a>

Siempre usa rutas absolutas (que comiencen con /) para los enlaces de navegación. Las rutas relativas se resuelven en función de la URL actual, lo que puede causar comportamientos inesperados.

Rutas Dinámicas con Valores Hardcodeados

<!-- ❌ Hardcoded — doesn't use actual data -->
<a href="/services/lawn-mowing">View Details</a>

<!-- ✅ Dynamic — works for any service -->
<a href="/services/{service.slug}">View Details</a>

Al enlazar a rutas dinámicas, siempre construye la URL a partir de tus datos.

Resumen

La navegación en SvelteKit usa etiquetas anchor estándar. SvelteKit las hace automáticamente rápidas con enrutamiento del lado del cliente, manteniéndolas funcionales incluso sin JavaScript.

Puntos clave:

Usa etiquetas regulares <a href="..."> para la navegación
SvelteKit intercepta y optimiza los enlaces internos automáticamente
Construye enlaces dinámicos usando la sintaxis de plantillas: href="/path/{variable}"
Siempre usa rutas absolutas que comiencen con /

¡Módulo Completado! 🎉

Terminaste el Módulo 2: Enrutamiento Básico. BookIt ahora tiene:

Página de inicio en /
Lista de servicios en /services
Páginas individuales de servicios en /services/[slug]
Página About en /about
Página Contact en /contact
Navegación entre todas las páginas

Lo que Falta: La navegación está duplicada en cada página. Eso es tedioso y propenso a errores.

Próximos Pasos

Continúa con el Módulo 3: Layouts, donde aprenderás a compartir UI (como la navegación) en todas las páginas sin repetición.