Una guía para el enrutamiento en SvelteKit
Implemente el sistema de enrutamiento para su aplicación con la ayuda de esta guía.
SvelteKit es un marco para crear aplicaciones web de todos los tamaños, con una gran experiencia en desarrollo y enrutamiento flexible basado en archivos. El marco combina SEO de aplicaciones de una sola página y beneficios de mejora progresiva con la navegación rápida de aplicaciones renderizadas del lado del servidor. Una de las características críticas de SvelteKit es su sistema de enrutamiento.
Comprensión del enrutamiento SvelteKit
SvelteKit es un marco construido sobre Svelte. En SvelteKit, el enrutamiento sigue un sistema basado en archivos. Esto significa que la estructura de directorios de sus páginas determina las rutas de su aplicación.
Para comprender mejor el sistema de enrutamiento SvelteKit, primero cree un proyecto SvelteKit. Para hacer esto, ejecute el siguiente código en su terminal:
npm create svelte@latest my-app
Después de ejecutar el bloque de código anterior, responderá una serie de indicaciones para configurar su aplicación.
A continuación, instale las dependencias necesarias para su proyecto. Para hacer este cd en su proyecto y ejecutar:
npm install
Abra el proyecto en el servidor de desarrollo ejecutando el siguiente comando en su terminal:
npm run dev
Ahora su proyecto estará funcionando en http://localhost:5173/. Cuando abra la aplicación en su servidor de desarrollo, tendrá una interfaz similar a la imagen a continuación.
La ruta raíz del proyecto '/' corresponde a un archivo llamado +page.svelte. Puede encontrar el archivo +page.svelte siguiendo la ruta del archivo; src/routes en tu proyecto.
Para crear diferentes rutas en SvelteKit, puede crear carpetas en su directorio src/routes. Cada carpeta corresponderá a una ruta diferente. Genera un archivo +page.svelte en cada carpeta para definir el contenido de esa ruta.
<!-- +page.svelte -->
<main>
<h2> This is the about page </h2>
</main>
El código anterior residirá dentro del archivo +page. Creará un archivo esbelto dentro de la carpeta about en el directorio src/routes. Este archivo contendrá el contenido de la ruta. Para ver la ruta en su navegador web, navegue hasta http://localhost:5173/about.
Al navegar a la ruta /about se mostrará esta interfaz en su pantalla:
Comprender las rutas anidadas
Las rutas anidadas son una forma de estructurar el sistema de enrutamiento en una aplicación web. En una estructura de rutas anidadas, las rutas se colocan dentro de otras rutas, creando una relación jerárquica entre ellas. Puede crear rutas anidadas en SvelteKit colocando carpetas con el archivo +page.svelte dentro de otras carpetas de rutas en el directorio src/routes.
Por ejemplo:
En este ejemplo, anida la ruta post dentro de la ruta blog. Para anidar la ruta post dentro de la ruta blog, cree la carpeta post y su archivo +page.svelte dentro la carpeta de ruta blog.
Para acceder a la ruta del blog en su aplicación, abra su navegador web y navegue hasta http://localhost:5173/blog.
La ruta de la publicación estará disponible en http://localhost:5173/blog/post.
Diseños y rutas de error
SvelteKit define un diseño para la aplicación de forma similar a Next.js. Ambos marcos utilizan un componente de diseño para definir la estructura de la aplicación.
SvelteKit utiliza +layout.svelte para definir un diseño para un grupo de páginas. Puede crear un archivo +layout.svelte en el directorio src/routes para definir un diseño para todas las páginas de su aplicación o en un subdirectorio para definir un diseño para una página específica. grupo de páginas.
A continuación se muestra un ejemplo de cómo definir una ruta de diseño para toda su aplicación:
El ejemplo anterior proporciona una ruta de diseño. El archivo contiene un elemento h1 que muestra el texto "Esta es una aplicación SvelteKit". También incluye un elemento slot. El elemento slot es un elemento especial que define la ubicación donde la aplicación representará el contenido de sus rutas dentro del diseño. Funciona de la misma manera que los componentes de Vue.
En este caso, su aplicación mostrará el contenido de sus rutas debajo del elemento h1.
Para definir una página de error, cree un archivo llamado +error.svelte en el directorio src/routes. Esta página se mostrará cuando se produzca un error durante el renderizado.
Por ejemplo:
Cuando encuentre un error, como navegar a una ruta inexistente, su aplicación recurrirá a esta ruta de error.
Por ejemplo:
La ruta http://localhost:5173/go no existe, por lo que la aplicación muestra la ruta error en su lugar.
Navegando entre páginas
Encontrar la mejor manera de navegar entre las rutas que creas es crucial para una buena experiencia. Tradicionalmente, el enrutamiento basado en archivos en la mayoría de las tecnologías utiliza enlaces para navegar entre diferentes páginas. Para navegar entre páginas en SvelteKit, puede utilizar una etiqueta de anclaje HTML simple.
Por ejemplo, puedes escribir este código en cualquier ruta que desees, pero debes escribirlo en la ruta layout encima de la etiqueta slot:
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/blog">Blog</a>
</li>
<li>
<a href="/blog/post">Post</a>
</li>
</ul>
Al hacer clic en cualquier etiqueta de anclaje, accederá a la ruta correspondiente.
Enrutamiento dinámico en SvelteKit
El enrutamiento dinámico le permite crear progresivamente rutas que genera la aplicación en función de datos o parámetros. Le permite crear aplicaciones web flexibles y dinámicas que manejan diferentes rutas y muestran contenido de acuerdo con datos o parámetros específicos.
Para crear una ruta dinámica en SvelteKit, cree una carpeta llamada [slug] y luego un archivo +page.svelte en la carpeta para definir el contenido de la ruta. Tenga en cuenta que puede nombrar la carpeta como desee, pero asegúrese de incluir siempre el nombre entre corchetes [].
A continuación se muestra un ejemplo de una ruta dinámica:
Para acceder a esta ruta en su navegador web, navegue hasta este enlace http://localhost:5173/[slug], donde [slug] puede ser cualquier nombre de ruta único e indefinido. tu eliges.
Puede acceder al parámetro [slug] de su aplicación utilizando los datos $page.params de $app/stores.
Por ejemplo:
<script lang='ts'>
import { page } from '$app/stores'
const params = $page.params;
</script>
<main>
<h1>This is the {params.slug} page</h1>
</main>
Aquí, asigna el objeto $page.params a la variable param y representa los datos param.slug en su aplicación.
La aplicación recupera los datos param.slug de su enlace. Por ejemplo, si navega a http://localhost:5173/fire, el contenido que se muestra en la aplicación será "Esta es la página de incendio".
Ahora conoce los conceptos básicos del enrutamiento en SvelteKit
El enrutamiento en SvelteKit es una característica poderosa que le permite estructurar su aplicación de una manera que tenga sentido. Comprender cómo utilizar esta función le permitirá crear aplicaciones web más eficientes y fáciles de usar. Ya sea que cree un pequeño proyecto personal o una aplicación a gran escala, el sistema de enrutamiento de SvelteKit tiene las herramientas que necesita para tener éxito.
Preguntas más frecuentes
P: ¿Cómo maneja Svelte el enrutamiento?
El soporte de enrutamiento integrado de Sveltekit le brinda menos flexibilidad, pero también simplifica las cosas. Si estás usando Svelte simple, necesitarás usar una biblioteca externa como svelte-routing.
P: ¿Cómo manejan otros marcos el enrutamiento?
La mayoría de los marcos admiten el enrutamiento de una forma u otra. El soporte de enrutamiento integrado de Angular es excelente, mientras que Vue admite el enrutamiento a través de su paquete oficial vue-router.
P: ¿Qué tan popular es Svelte?
Svelte es uno de los marcos de JavaScript más populares. De hecho, la encuesta Stack Overflow de 2023 encontró que los desarrolladores lo admiran más que cualquier otro.