Conecta Tus Páginas

BookIt ahora tiene cinco rutas: /, /about, /contact, /services y /services/[slug], — pero los usuarios solo pueden acceder a ellas escribiendo las URLs en la barra de direcciones. Así no funcionan los sitios web. Agreguemos una navegación adecuada para que los usuarios puedan navegar por la aplicación 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
Integrar navegación en las páginas de BookIt
Enlazar desde la lista de servicios hacia los detalles de cada servicio

Cómo Funcionan los Enlaces en SvelteKit

Aquí están las buenas noticias: 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 recargas completas 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 que enlace 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. Al hacer clic en "Browse Services" deberías ir a /services sin una recarga de 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 de servicios individuales. 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 nuestra ruta dinámica espera.

Agrega Navegación a la Página de Detalle

Las páginas de detalle de servicio deberían enlazar de vuelta 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, introduciremos los layouts, que se encargan de 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 los 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 una carga de 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 falla al 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 diferentes (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 ni se recargue.

Errores Comunes

Falta la Barra Diagonal Inicial

<!-- ❌ 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 Escritas de Forma Estática

<!-- ❌ 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>

Cuando enlaces 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 sintaxis de plantilla: 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 de servicio individuales 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.