Navegación en SvelteKit

En muchos frameworks de SPA, la navegación es algo que se configura manualmente. Se importa un componente <Link>, se registran rutas con un objeto router, y se llaman funciones imperativas navigate() cada vez que la URL necesita cambiar programáticamente. Si falta alguno de estos pasos, o el navegador hace una recarga completa o simplemente no ocurre nada.

SvelteKit adopta una posición fundamentalmente diferente: la plataforma ya sabe cómo funciona la navegación. El navegador ha estado navegando entre documentos durante treinta años. Las etiquetas <a> estándar, la API de historial y los envíos de formularios son primitivos web de primera clase. El trabajo de SvelteKit es mejorarlos, no reemplazarlos.

La filosofía de mejora progresiva de SvelteKit significa que tu navegación funciona incluso cuando JavaScript falla. Esto no se trata solo de casos límite — se trata de construir aplicaciones robustas. Siempre comienza con HTML estándar y luego mejora con JavaScript.

La Etiqueta Anchor Estándar

Para enlazar a otra página en SvelteKit, simplemente usas HTML estándar:

<!-- Standard HTML works perfectly -->
<a href="/about">About Us</a>
<a href="/blog">Blog</a>
<a href="/contact">Contact</a>

Esto es mejor por varias razones:

Accesibilidad: Los lectores de pantalla y las tecnologías de asistencia entienden perfectamente las etiquetas <a>
Resiliencia: Si JavaScript no se carga, el enlace sigue funcionando (solo realiza una recarga completa de la página)
Simplicidad: No necesitas importar un componente especial solo para hacer un enlace
SEO: Los motores de búsqueda comprenden y siguen los enlaces estándar

Navegación del Lado del Cliente

Aunque escribes HTML estándar, SvelteKit mejora estos enlaces automáticamente. Cuando JavaScript está cargado y un usuario hace clic en un enlace interno:

Interceptación: El router del lado del cliente de SvelteKit captura el evento de clic
Prevención: Evita la recarga completa de página predeterminada del navegador
Obtención: Obtiene solo los datos y el código necesarios para la siguiente página
Intercambio: Reemplaza el componente de la página actual por el nuevo, manteniendo los layouts intactos

Esta mejora es transparente y progresiva. Si JavaScript aún no se ha cargado o falla por completo, el enlace sigue funcionando — solo realiza una recarga completa de la página. Tu navegación se degrada de manera elegante en lugar de romperse. Esa es una diferencia significativa: el modo de falla de un enlace estándar es una carga de página ligeramente más lenta, no una página rota.

Precarga

Puedes hacer que tu aplicación se sienta aún más rápida diciéndole a SvelteKit que comience a cargar la siguiente página antes de que el usuario haga clic.

Precarga al Pasar el Cursor

Agrega el atributo data-sveltekit-preload-data a tu etiqueta <body> (en src/app.html):

<!-- src/app.html -->
<body data-sveltekit-preload-data="hover">
	<div style="display: contents">%sveltekit.body%</div>
</body>

Ahora, cuando un usuario pasa el mouse sobre un enlace, SvelteKit comienza a obtener los datos de esa página inmediatamente. Para cuando el usuario hace clic (generalmente 100-200ms después), los datos ya suelen estar disponibles, haciendo que la transición se sienta instantánea.

Opciones de Precarga

Valor	Comportamiento
`hover`	Precargar cuando el mouse pasa sobre el enlace
`tap`	Precargar cuando el usuario comienza a presionar (táctil o mouse)
`off`	Deshabilitar la precarga

Precarga por Enlace

También puedes controlar la precarga en enlaces individuales:

<!-- Always preload this important link on hover -->
<a href="/pricing" data-sveltekit-preload-data="hover">Pricing</a>

<!-- Don't preload this link (maybe it's expensive) -->
<a href="/reports" data-sveltekit-preload-data="off">Reports</a>

<!-- Only preload the code, not the data -->
<a href="/dashboard" data-sveltekit-preload-code>Dashboard</a>

Usa data-sveltekit-preload-code para rutas con paquetes de JavaScript pesados. Esto descarga el código al pasar el cursor, pero espera para obtener los datos hasta el clic, equilibrando el rendimiento con el costo de los datos.

Construyendo un Componente de Navegación

Construyamos un componente de navegación reutilizable que resalte la página actual:

<!-- src/lib/components/Navigation.svelte -->
<script lang="ts">
	import { page } from '$app/state'
</script>

<nav>
	<a href="/" aria-current={page.url.pathname === '/' ? 'page' : undefined}> Home </a>
	<a href="/about" aria-current={page.url.pathname === '/about' ? 'page' : undefined}> About </a>
	<a href="/blog" aria-current={page.url.pathname.startsWith('/blog') ? 'page' : undefined}>
		Blog
	</a>
	<a href="/contact" aria-current={page.url.pathname === '/contact' ? 'page' : undefined}>
		Contact
	</a>
</nav>

<style>
	nav {
		display: flex;
		gap: 1rem;
		padding: 1rem;
		background: var(--surface-2);
	}

	a {
		text-decoration: none;
		color: var(--text);
		padding: 0.5rem 1rem;
		border-radius: 4px;
		transition: background-color 0.2s;
	}

	a:hover {
		background: var(--surface-3);
	}

	/* aria-current is the accessible way to style active links */
	a[aria-current='page'] {
		background: var(--brand);
		color: white;
	}
</style>

El objeto page de $app/state (nuevo en Svelte 5) te proporciona información sobre la página actual, incluida la URL. Lo usamos para resaltar el elemento de navegación activo.

Navegación Programática con `goto()`

A veces necesitas navegar en respuesta a una acción — después del envío de un formulario, cuando expira un temporizador o cuando se cumple alguna condición. Usa la función goto:

<script lang="ts">
	import { goto } from '$app/navigation'

	async function handleLogin() {
		const success = await login()

		if (success) {
			// Navigate to dashboard
			goto('/dashboard')
		}
	}
</script>

<button onclick={handleLogin}>Log In</button>

Opciones de `goto()`

import { goto } from '$app/navigation'

// Basic navigation
goto('/about')

// Replace history entry (back button won't return here)
goto('/wizard/step-2', { replaceState: true })

// Prevent scroll reset
goto('/blog/page/2', { noScroll: true })

// Invalidate all load functions and refetch
goto('/dashboard', { invalidateAll: true })

Redirecciones en Funciones Load

Para redirecciones del lado del servidor, usa el helper redirect en tus funciones load:

// src/routes/admin/+page.server.ts
import { redirect } from '@sveltejs/kit'
import type { PageServerLoad } from './$types'

export const load: PageServerLoad = async ({ locals }) => {
	if (!locals.user) {
		// 303 = redirect after form submission
		// 307 = temporary redirect
		// 308 = permanent redirect
		redirect(303, '/login')
	}

	return {
		user: locals.user
	}
}

Enlaces Externos

Los enlaces a sitios externos funcionan normalmente y no serán interceptados:

<!-- External links open normally -->
<a href="https://svelte.dev">Svelte Docs</a>

<!-- Force a full page reload for internal link -->
<a href="/legacy-page" data-sveltekit-reload>Legacy Page</a>

<!-- Open in new tab -->
<a href="https://github.com" target="_blank" rel="noopener">GitHub</a>

Eventos de Navegación

Puedes escuchar eventos de navegación para análisis, indicadores de carga u otros efectos secundarios:

<script lang="ts">
	import { beforeNavigate, afterNavigate } from '$app/navigation'

	beforeNavigate(({ from, to, cancel }) => {
		// Runs before leaving current page
		if (hasUnsavedChanges && !confirm('Discard changes?')) {
			cancel()
		}
	})

	afterNavigate(({ from, to, type }) => {
		// Runs after arriving at new page
		// type can be 'link', 'popstate', 'goto', etc.
		analytics.track('page_view', { path: to?.url.pathname })
	})
</script>

Usa beforeNavigate para advertir a los usuarios sobre cambios no guardados, y afterNavigate para el seguimiento de análisis o la lógica de restauración del scroll.

El Objeto de Estado `page`

El objeto page de $app/state contiene información útil:

<script lang="ts">
	import { page } from '$app/state'
</script>

<p>Current path: {page.url.pathname}</p>
<p>Search params: {page.url.searchParams.toString()}</p>
<p>Route ID: {page.route.id}</p>
<p>Route params: {JSON.stringify(page.params)}</p>

{#if page.error}
	<p>Error: {page.error.message}</p>
{/if}

{#if page.data.user}
	<p>Logged in as: {page.data.user.name}</p>
{/if}

Preservación de Estado (Snapshots)

Cuando un usuario navega fuera de una página y hace clic en "atrás", espera que la página esté exactamente como la dejó — con la posición de scroll restaurada y los campos del formulario intactos. SvelteKit maneja la restauración del scroll automáticamente, pero el estado reactivo de los componentes (como el texto escrito en un cuadro de búsqueda) no sobrevive a un desmontaje y remontaje completo del componente de forma predeterminada. Los Snapshots resuelven esto.

Un snapshot es un par de funciones: capture se ejecuta cuando el componente se desmonta (preservando el estado en el historial de sesión), y restore se ejecuta cuando el componente se remonta desde el historial (reinstaurando ese estado).

En Svelte 5, snapshot se exporta desde el <script> de instancia regular usando export const. Esta es una de las exportaciones que no son props que Svelte 5 preserva — export let para declarar props fue reemplazado por $props(), pero export const para exponer valores en la instancia del componente sigue funcionando. Las funciones capture y restore encierran el estado reactivo search en el mismo bloque de script:

<script lang="ts">
	import type { Snapshot } from './$types'

	let search = $state('')

	export const snapshot: Snapshot<string> = {
		capture: () => search,
		restore: (value) => {
			search = value
		}
	}
</script>

<input bind:value={search} placeholder="Search..." />

Cuando se llama a capture() antes de navegar fuera, lee el valor actual de search. Cuando se llama a restore(value) al navegar hacia atrás, escribe de vuelta en search y la reactividad de Svelte actualiza el input automáticamente. El estado se almacena en la entrada del historial de sesión del navegador, por lo que sobrevive a la navegación hacia atrás pero se descarta cuando se cierra la pestaña.

Los snapshots son especialmente útiles para interfaces de búsqueda, filtros, estado de paginación y cualquier estado de UI efímero que mejora la experiencia del usuario al navegar hacia atrás.

Patrones Comunes

Helper para Enlace Activo

Crea una función reutilizable para determinar si un enlace está activo:

// src/lib/utils/navigation.ts
export function isActive(pathname: string, href: string, exact = false): boolean {
	if (exact) {
		return pathname === href
	}
	return pathname === href || pathname.startsWith(href + '/')
}

<script lang="ts">
	import { page } from '$app/state'
	import { isActive } from '$lib/utils/navigation'
</script>

<a href="/blog" aria-current={isActive(page.url.pathname, '/blog') ? 'page' : undefined}> Blog </a>

Breadcrumbs

<script lang="ts">
	import { page } from '$app/state'

	// Convert /blog/posts/my-article to breadcrumb segments
	let segments = $derived(
		page.url.pathname
			.split('/')
			.filter(Boolean)
			.map((segment, index, arr) => ({
				name: segment.replace(/-/g, ' '),
				href: '/' + arr.slice(0, index + 1).join('/')
			}))
	)
</script>

<nav aria-label="Breadcrumb">
	<ol>
		<li><a href="/">Home</a></li>
		{#each segments as segment, i}
			<li>
				{#if i === segments.length - 1}
					<span aria-current="page">{segment.name}</span>
				{:else}
					<a href={segment.href}>{segment.name}</a>
				{/if}
			</li>
		{/each}
	</ol>
</nav>

Conclusión

El sistema de navegación de SvelteKit transforma la experiencia tradicional de una aplicación multi-página en algo que se siente como una aplicación de página única, preservando al mismo tiempo los beneficios fundamentales de la web. Al actualizar automáticamente las etiquetas <a> estándar a navegación del lado del cliente, proporciona transiciones instantáneas sin requerir que los desarrolladores aprendan nuevos componentes de enlace o APIs de enrutamiento. El sistema inteligente de precarga hace que la navegación se sienta instantánea, mientras que la función goto() y los hooks de navegación brindan control programático cuando es necesario.

Dominar la navegación en SvelteKit implica entender el equilibrio entre la mejora automática y el control manual. Los enlaces estándar proporcionan la mejor experiencia de usuario en la mayoría de los casos, la precarga elimina la latencia percibida y los eventos de navegación habilitan analytics y guardas sin comprometer el flujo de navegación principal. Combinado con la preservación de snapshots para el estado de los componentes y el store reactivo page para el estado derivado de la URL, SvelteKit proporciona todo lo necesario para construir aplicaciones que se sientan rápidas, responsivas y nativas, manteniéndose fundamentalmente basadas en la web.

Puntos Clave

La navegación del lado del cliente es automática - las etiquetas <a href="/path"> estándar son interceptadas y actualizadas a navegación estilo SPA sin recargas completas de página
La precarga elimina la latencia percibida usando data-sveltekit-preload-data en los enlaces para obtener los datos de la ruta al pasar el cursor, haciendo que la navegación se sienta instantánea
goto() habilita la navegación programática para envíos de formularios, redirecciones después de acciones o enrutamiento condicional basado en el estado de la aplicación
redirect() en funciones load maneja las redirecciones del lado del servidor durante SSR o la carga de datos, lanzando una respuesta de redirección que SvelteKit procesa automáticamente
page de $app/state proporciona estado reactivo de la URL con las propiedades url, params, route, status y data accesibles desde cualquier componente sin prop drilling
Los hooks de navegación habilitan el control del ciclo de vida - beforeNavigate para guardas/confirmaciones, onNavigate para View Transitions, afterNavigate para analytics/seguimiento
Los snapshots preservan el estado transitorio entre navegaciones usando la exportación snapshot, capturando inputs de formularios, posiciones de scroll o estado de componentes que no debería perderse
Las estrategias de precarga ofrecen control granular - hover, tap, viewport u off en enlaces individuales, con valores predeterminados globales en app.html mediante atributos de datos

Ver También

Documentación Oficial de SvelteKit - Navegación
goto() - API de navegación programática
page de $app/state — Estado reactivo de página, URL e información de ruta
Ciclo de Vida de Navegación - hooks beforeNavigate, afterNavigate
Precarga - Estrategias y configuración de precarga
API de View Transitions - Animaciones nativas de transición de página
redirect() - Helper de redirección del lado del servidor