Introducción al enrutamiento en Svelte

Svelte es un marco web de rápido crecimiento que puede usar para crear sitios web. Se presenta como una alternativa liviana y fácil de usar a los marcos populares como React y Vue.

Cada marco de JavaScript popular tiene una biblioteca complementaria que puede usar para el enrutamiento. Descubra cómo Svelte le permite administrar sus URL y el código que las maneja.

Bibliotecas de enrutamiento populares

La biblioteca de enrutamiento más popular para React es React Router, creado por el equipo de Remix. Para VueJS, está Vue Router que le da al desarrollador un control preciso sobre cualquier navegación. En el mundo Svelte, la biblioteca de enrutamiento más popular es enrutamiento esbelto.

La otra biblioteca de enrutamiento principal para Svelte es navegador esbelto. Ya que es un tenedor de enrutamiento esbelto, es útil aprender primero sobre esa biblioteca.

Cómo funciona la biblioteca de enrutamiento esbelto

Hay tres componentes importantes para el manejo de rutas en Svelte: enrutador, Enlace, y Ruta. Para utilizarlos en su aplicación, simplemente puede importar estas utilidades desde el enrutamiento esbelto biblioteca.

<guion>
importar {ruta, enrutador, enlace} de "enrutamiento esbelto";
guion>

El componente Router puede tener dos accesorios opcionales: camino base y URL. El camino base propiedad es similar a la nombre base apoyo en React Router.

De forma predeterminada, se establece en "/". basepath puede ser útil si su aplicación tiene múltiples puntos de entrada. Por ejemplo, considere el siguiente código Svelte:

<guion>
 importar { Ruta, Enrutador, Enlace } de "enrutamiento esbelto";
 let basepath = "/usuario";
 let ruta = ubicación.nombreruta;
guion>
<enrutador {camino base}>
<divisiónal hacer clic={() => (ruta = ubicación.nombre de la ruta)}>
<Enlacea="/">Ir a casaEnlace>
<Enlacea="/usuario/david">Iniciar sesión como DavidEnlace>
división>
<principal>
 Usted está aquí: <código>{camino}código>
<Rutacamino="/">
<h1>¡Bienvenido a casa!h1>
Ruta>
<Rutacamino="/David">
<h1>¡Hola David!h1>
Ruta>
principal>
enrutador>

Si ejecuta este código, notará que cuando hace clic en el Ir a casa botón, el navegador navega a la ruta base "/usuario". La ruta define el componente que debe renderizarse si la ruta coincide con el valor en el especificado Ruta apuntalar.

Puede definir qué elementos representar dentro del componente Ruta o como un elemento separado .esbelto archivo siempre y cuando importe ese archivo correctamente. Por ejemplo:

<Rutacamino="/acerca de"componente={Acerca de}/>

El bloque de código de arriba le dice al navegador que renderice el aplicación componente cuando el nombre de la ruta es "/about".

Cuando usas enrutamiento esbelto, definir vínculos internos con el Enlace componente en lugar de HTML tradicional a elementos.

Esto es similar a cómo React Router maneja los enlaces internos; cada componente Link debe tener un a prop que le dice al navegador a qué ruta navegar.

Cuando el navegador representa un componente de Svelte, Svelte convierte automáticamente todos los componentes de enlace en componentes equivalentes. a elementos, reemplazando el a apoyo con un href atributo. Esto significa que cuando escribes lo siguiente:

<Enlacea="/alguna/ruta">Este es un componente de enlace en enrutamiento esbeltoEnlace>

Svelte lo presenta al navegador como:

<ahref="/alguna/ruta">Este es un componente de enlace en enrutamiento esbeltoa>

Debe usar el componente Enlace en lugar del tradicional a cuando se trabaja con enrutamiento esbelto. Esto es porque a Los elementos realizan una recarga de página de forma predeterminada.

Creación de un SPA con Svelte y Svelte-Routing

Es hora de poner en práctica todo lo que has aprendido creando una sencilla aplicación de diccionario que permita al usuario buscar palabras. Este proyecto utilizará la libre API de diccionario.

Para comenzar, asegúrese de tener Yarn instalado en su máquina y ejecute:

hilo crear vite

Esto creará un andamiaje en un nuevo proyecto utilizando la herramienta de compilación Vite. Asigne un nombre a su proyecto y luego elija "Svelte" como marco y "JavaScript" como variante. Después de eso, ejecute los siguientes comandos uno tras otro:

cd
hilo
hilado agregar enrutamiento esbelto
desarrollador de hilo

A continuación, elimine el contenido de la App.esbelta archivo y cambie la estructura del proyecto para que se vea así:

En la ilustración anterior, puede ver que hay una carpeta de "componentes" con dos archivos: Home.esbelta y Significado.esbelto. Significado.esbelto es el componente que se representará cuando el usuario busque una palabra.

Navegar a la App.esbelta e importe los componentes Route, Router y Link de la biblioteca de enrutamiento esbelto. También asegúrese de importar el Home.esbelta y App.esbelta componentes

<guion>
 importar { Ruta, Enrutador, Enlace } de "enrutamiento esbelto";
 importar Inicio desde "./components/Home.svelte";
 importar Significado de "./components/Meaning.svelte";
guion>

A continuación, cree un componente de enrutador que envuelva un principal Elemento HTML con la clase "aplicación".

<enrutador>
<principalclase="aplicación">
principal>
enrutador>

En el principal elemento, agregue un navegación elemento con un componente de enlace como su hijo. La prop "a" de este componente de enlace debe apuntar a "/". Este componente permitirá al usuario navegar a la página de inicio.

<principalclase="aplicación">
<navegación>
<Enlacea="/">HogarEnlace>
navegación>
principal>

Ahora es el momento de trabajar en las rutas. Cuando el usuario carga la aplicación, el Hogar componente debe renderizar.

Navegar a "/buscar/:palabra" debería mostrar el Significado componente. La cláusula ":word" es un parámetro de ruta.

Para este proyecto, no necesita preocuparse por CSS. Simplemente reemplace el contenido de su propio aplicación.css archivo con el contenido de la aplicación.css archivo de este repositorio de GitHub.

Ahora es el momento de definir las rutas. La ruta del nivel raíz debe representar el Hogar componente, mientras que "/buscar/:palabra" debería representar el Significado componente.

<Rutacamino="/"componente={Hogar} />
<Rutacamino="/buscar/:palabra"let: parámetros>
<Significadopalabra={parámetros.palabra} />
Ruta>

Este bloque de código utiliza el dejar directiva para pasar el parámetro "palabra" al Significado componente como accesorio.

Ahora, abre el Home.esbelta archivar e importar el navegar utilidad de la biblioteca "svelte-routing" y defina una variable palabra ingresada.

<guion>
 import {navegar} desde "svelte-routing";
 let palabraentrada;
guion>

Bajo la guion etiqueta, cree un elemento principal con la clase "página de inicio", luego cree una división elemento con la clase "diccionario-texto".

<principalclase="página principal">
<divisiónclase="texto-diccionario">Diccionariodivisión>
principal>

A continuación, cree un formulario con un en: enviar directiva. Este formulario debe contener dos hijos: un aporte elemento cuyo valor está ligado al palabra ingresada variable y un botón de envío que se procesa condicionalmente tan pronto como el usuario comienza a escribir:

<formaen: enviar|prevenirPredeterminado={() => navegar(`/buscar/${palabra ingresada.toLowerCase()}`)}>
<aporte
 tipo = "texto"
 enlazar: valor={palabra ingresada}
 placeholder="Comience su búsqueda..."
 enfoque automático
 />
 {#si se ingresóPalabra}
<botóntipo="entregar">Buscar palabrabotón>
 {/si}
forma>

Este bloque de código utiliza el navegar función para redirigir al usuario una vez que la acción de envío haya finalizado. Ahora, abre el Significado.esbelto y, en la etiqueta del script, exporte el palabra apoyar y crear un mensaje de error variable:

exportar palabra let;
let mensaje de error = "Sin conexión. Revisa tu internet";

A continuación, realice una solicitud GET a la API del diccionario pasando el palabra como el parámetro:

asíncronofuncióngetWordSignificado(palabra) {
constante respuesta = esperar buscar(
` https://api.dictionaryapi.dev/api/v2/entries/en/${palabra}`
 );
constante json = esperar respuesta.json();
consola.registro (json);
si (respuesta.ok) {
devolver json;
 } demás {
 mensaje de error = json.mensaje;
tirarnuevoError(json);
 }
 }
dejar promesa = getWordSignificado (palabra);

En el bloque de código anterior, la función asíncrona devuelve los datos JSON si la respuesta es exitosa. La variable promesa representa el resultado de la getWordSignificado función cuando se invoca.

En el marcado, define un div con la clase página de significado. A continuación, defina un elemento h1 que contenga el palabra variables en minúsculas:

<divisiónclase="página de significado">
<h1>
 {palabra.toLowerCase()}
h1>
división>

Luego, use los bloques de espera de Svelte para llamar al getWordSignificado función:

{#esperar promesa}
<pag>Cargando...pag>
{:luego entradas}
{:atrapar}
 {mensaje de error}
{/esperar}

Este código muestra la Cargando... texto cuando se realiza la solicitud GET a la API. Si hay un error, mostrará el contenido de mensaje de error.

En el {:luego entradas} bloque, agregue lo siguiente:

{#cada entrada como entrada}
 {#cada entrada.significados como significado}
<divisiónclase="entrada">
<divisiónclase="Parte del discurso">
 {significado.partOfSpeech}
división>
<viejo>
 {#cada significado.definiciones como definición}
<li>
 {definición.definición}
<hermano />
<divisiónclase="ejemplo">
 {#if definición.ejemplo}
 {definición.ejemplo}
 {/si}
división>
li>
 {/cada}
viejo>
división>
 {/cada}
{/cada}

Si la promesa se resuelve con éxito, el entradas variable contiene los datos resultantes.

Entonces para cada iteración de entrada y significado, este código representa la parte de la oración usando significado.partOfSpeech y una lista de definiciones usando definición.definición. También generará una oración de ejemplo, si hay una disponible.

Eso es todo. Ha creado una aplicación de página única (SPA) de diccionario utilizando enrutamiento esbelto. Puede llevar las cosas más lejos si lo desea, o puede consultar navegador esbelto, un tenedor de enrutamiento esbelto.

Mejora de la experiencia del usuario con el enrutamiento del lado del cliente

Hay muchos beneficios al manejar el enrutamiento en el navegador en lugar del servidor. Las aplicaciones que hacen uso del enrutamiento del lado del cliente pueden sentirse más fluidas para el usuario final, especialmente cuando se combinan con animaciones y transiciones.

Sin embargo, si desea que su sitio web obtenga una clasificación más alta en los motores de búsqueda, debe considerar el manejo de rutas en el servidor.