Navegación y Rutas en SvelteKit

---

La navegación y manejo de rutas es uno de los aspectos clave en el desarrollo de aplicaciones web. En SvelteKit, este proceso es intuitivo gracias a su enfoque basado en el sistema de archivos para definir rutas.

Introducción a las Rutas en SvelteKit

En SvelteKit, las rutas son administradas automáticamente basándose en la estructura de archivos dentro de la carpeta src/routes. Cada archivo o carpeta dentro de esta estructura representa una ruta específica.

Por ejemplo:

src/routes/
├── index.svelte      // Ruta principal ('/')
├── about.svelte      // Ruta '/about'
└── blog/
  ├── index.svelte  // Ruta '/blog'
  └── [id].svelte   // Ruta dinámica '/blog/:id'

• index.svelte: Representa la ruta raíz de un directorio.
• Archivos entre corchetes ([ ]): Indican rutas dinámicas.

Configuración Básica de Rutas

1Crear una Ruta Básica

Para agregar una nueva ruta, simplemente crea un archivo .svelte dentro de src/routes.

Ejemplo:

• Archivo: src/routes/about.svelte

<script>
let mensaje = "¡Bienvenido a la página About!";
</script>

<h1>About</h1>
<p>{mensaje}</p>

Esta ruta será accesible en **http://localhost:5173/about.

2Rutas Dinámicas

Las rutas dinámicas permiten capturar segmentos variables en la URL. Esto se logra creando archivos con nombres entre corchetes.

Ejemplo:

• Archivo: src/routes/blog/[id].svelte

<script context="module">
export async function load({ params }) {
  const { id } = params;
  return {
    props: { id },
  };
}
</script>

<script>
export let id;
</script>

<h1>Blog Post {id}</h1>
<p>Este es el contenido del post con ID: {id}</p>

• URL para probar: http://localhost:5173/blog/123 En este contexto, el segmento 123 será capturado como el valor del parámetro id.

3Navegación entre Rutas

SvelteKit proporciona el componente <a>, que es un enlace estándar de HTML para la navegación entre rutas. También puedes usar el atributo rel="prefetch" para cargar anticipadamente los datos.

Ejemplo:

<nav>
<a href="/">Inicio</a>
<a href="/about" rel="prefetch">About</a>
<a href="/blog">Blog</a>
</nav>

4Layouts Compartidos

Puedes crear diseños compartidos para varias páginas utilizando un archivo +layout.svelte.

Ejemplo:

• Archivo: src/routes/+layout.svelte

<script>
export let data;
</script>

<header>
<h1>Mi Aplicación</h1>
</header>

<main>
<slot />
</main>

<footer>
<p>Todos los derechos reservados © 2025</p>
</footer>

Cualquier ruta dentro de src/routes heredará este diseño automáticamente.

5Redirecciones

Puedes definir redirecciones utilizando el método redirect en la función load.

Ejemplo:

• Archivo: src/routes/old-page.svelte

<script context="module">
export async function load() {
  throw redirect(301, '/new-page');
}
</script>

Visitar /old-page redirigirá automáticamente a /new-page.