Enrutamiento

Páginas

• SvelteKit utiliza enrutamiento basado en el sistema de archivos
• Cada archivo +page.svelte dentro de src/routes crea una página en la aplicación
• src/routes/+page.svelte corresponde a /
• src/routes/about/+page.svelte corresponde a /about
• Si una página no existe se muestra un error 404

src/routes/about/+page.svelte

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

<h1>About</h1>
<p>This is the about page</p>

Layouts

• Las distintas rutas de la aplicación suelen compartir una interfaz de usuario común
• En lugar de repetirla en cada componente +page.svelte se puede usar un componente +layout.svelte que aplique a todas las rutas del mismo directorio
• Un archivo +layout.svelte se aplica a todas las rutas secundarias, incluidas las hermanas +page.svelte (si existen)
• Se pueden anidar diseños (layouts) a cualquier profundidad
• La etiqueta {@render children()} es donde se renderizará el contenido de la página

src/routes/+layout.svelte

<script lang="ts">
  let { children } = $props();
</script>

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

{@render children()}

Parámetros

• Para crear rutas con parámetros dinámicos se utilizan corchetes alrededor de un nombre de variable válido
• Por ejemplo una ruta src/routes/blog/[slug]/+page.svelte creará una ruta que coincida con /blog/one, /blog/two, /blog/three, etc.
• Pueden aparecer varios parámetros de ruta dentro de un mismo segmento de URL, siempre que estén separados por al menos un caracter estático: /foo/[bar]x[baz] es una ruta válida donde [bar] y [baz] son parámetros dinámicos

src/routes/blog/[slug]/+page.svelte

<h1>Blog post</h1>