Una introducción al enrutamiento en Svelte
El enrutamiento es una técnica que utilizará con muchos marcos, incluido Svelte. Descubre cómo utilizarlo a tu favor.
Svelte es un marco web de rápido crecimiento que puede utilizar para crear sitios web. Se presenta como una alternativa ligera y fácil de usar a marcos populares como React y Vue.
Cada marco de JavaScript popular tiene una biblioteca complementaria que puede utilizar 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, creada por el equipo de Remix. Para VueJS, existe Vue Router que le brinda al desarrollador un control preciso sobre cualquier navegación. En el mundo Svelte, la biblioteca de enrutamiento más popular es svelte-routing.
La otra biblioteca de enrutamiento principal para Svelte es svelte-navigator. Dado que es una bifurcación de enrutamiento esbelto, es útil conocer esa biblioteca primero.
Cómo funciona la biblioteca de enrutamiento esbelto
Hay tres componentes importantes para manejar rutas en Svelte: Router, Link y Route. Para usarlos en su aplicación, simplemente puede importar estas utilidades desde la biblioteca svelte-routing.
<script>
import {Route, Router, Link} from "svelte-routing";
</script>
El componente Enrutador puede tener dos accesorios opcionales: basepath y url. La propiedad basepath es similar a la propiedad basename en React Router.
De forma predeterminada, está configurado en "/". basepath puede resultar útil si su aplicación tiene varios puntos de entrada. Por ejemplo, considere el siguiente código Svelte:
<script>
import { Route, Router, Link } from "svelte-routing";
let basepath = "/user";
let path = location.pathname;
</script>
<Router {basepath}>
<div on:click={() => (path = location.pathname)}>
<Link to="/">Go to home</Link>
<Link to="/user/david">Login as David</Link>
</div>
<main>
You are here: <code>{path}</code>
<Route path="/">
<h1>Welcome Home!</h1>
</Route>
<Route path="/david">
<h1>Hello David!</h1>
</Route>
</main>
</Router>
Si ejecuta este código, notará que cuando hace clic en el botón Ir a inicio, el navegador navega a la ruta base "/usuario". Ruta define el componente que debe representarse si la ruta coincide con el valor en la propiedad Ruta especificada.
Puede definir qué elementos representar dentro del componente Ruta o como un archivo .svelte separado siempre que importe ese archivo correctamente. Por ejemplo:
<Route path="/about" component={About}/>
El bloque de código anterior le indica al navegador que muestre el componente App cuando el nombre de la ruta es "/about".
Cuando utilice enrutamiento esbelto, defina enlaces internos con el componente Link en lugar de los elementos HTML tradicionales a.
Esto es similar a cómo React Router maneja los enlaces internos; Cada componente Link debe tener un accesorio to que le indique al navegador a qué ruta navegar.
Cuando el navegador representa un componente Svelte, Svelte convierte automáticamente todos los componentes Link en elementos a equivalentes, reemplazando el atributo to con un atributo href. Esto significa que cuando escribes lo siguiente:
<Link to="/some/path">This is a Link Component in svelte-routing</Link>
Svelte lo presenta al navegador como:
<a href="/some/path">This is a Link Component in svelte-routing</a>
Debe utilizar el componente Link en lugar del elemento tradicional a cuando trabaje con enrutamiento esbelto. Esto se debe a que los elementos a realizan una recarga de página de forma predeterminada.
Creando un SPA con Svelte y Svelte-Routing
Es hora de poner en práctica todo lo aprendido creando una sencilla aplicación de diccionario que permita al usuario buscar palabras. Este proyecto utilizará la API de diccionario gratuita.
Para comenzar, asegúrese de tener Yarn instalado en su máquina y ejecute:
yarn create vite
Esto creará un andamiaje para un nuevo proyecto utilizando la herramienta de construcció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 <project_name>
yarn
yarn add svelte-routing
yarn dev
A continuación, elimine el contenido del archivo App.svelte y cambie la estructura del proyecto para que tenga este aspecto:
En la ilustración anterior, puede ver que hay una carpeta de "componentes" con dos archivos: Home.svelte y Meaning.svelte. Meaning.svelte es el componente que se mostrará cuando el usuario busque una palabra.
Navegue hasta el archivo App.svelte e importe los componentes Ruta, Enrutador y Enlace de la biblioteca de enrutamiento svelte. También asegúrese de importar los componentes Home.svelte y App.svelte.
<script>
import { Route, Router, Link } from "svelte-routing";
import Home from "./components/Home.svelte";
import Meaning from "./components/Meaning.svelte";
</script>
A continuación, cree un componente de enrutador que envuelva un elemento HTML principal con la clase "aplicación".
<Router>
<main class="app">
</main>
</Router>
En el elemento main, agregue un elemento nav con un componente Link como hijo. La propiedad "a" de este componente de enlace debe apuntar a "/". Este componente permitirá al usuario navegar a la página de inicio.
<main class="app">
<nav>
<Link to="/">Home</Link>
</nav>
</main>
Ahora es el momento de trabajar en las rutas. Cuando el usuario carga la aplicación, el componente Home debería renderizarse.
Navegar a "/find/:word" debería mostrar el componente Significado. La cláusula ":word" es un parámetro de ruta.
Para este proyecto, no necesitas preocuparte por CSS. Simplemente reemplace el contenido de su propio archivo app.css con el contenido del archivo app.css de este repositorio de GitHub.
Ahora es el momento de definir las rutas. La ruta del nivel raíz debería representar el componente Inicio, mientras que "/find/:word" debería representar el componente Significado.
<Route path="/" component={Home} />
<Route path="/find/:word" let:params>
<Meaning word={params.word} />
</Route>
Este bloque de código utiliza la directiva let para pasar el parámetro "palabra" al componente Significado como accesorio.
Ahora, abra el archivo Home.svelte e importe la utilidad navigate de la biblioteca "svelte-routing" y defina una variable enteredWord.
<script>
import { navigate } from "svelte-routing";
let enteredWord;
</script>
Bajo la etiqueta script, cree un elemento principal con la clase "página de inicio", luego cree un elemento div con la clase "diccionario-texto".
<main class="homepage">
<div class="dictionary-text">Dictionary</div>
</main>
A continuación, cree un formulario con una directiva on:submit. Este formulario debe contener dos elementos secundarios: un elemento input cuyo valor está vinculado a la variable enteredWord y un botón de envío que se representa condicionalmente tan pronto como el usuario comienza a escribir:
<form on:submit|preventDefault={() => navigate(`/find/${enteredWord.toLowerCase()}`)}>
<input
type="text"
bind:value={enteredWord}
placeholder="Begin your search..."
autofocus
/>
{#if enteredWord}
<button type="submit">Search Word</button>
{/if}
</form>
Este bloque de código utiliza la función navegar para redirigir al usuario una vez que finaliza la acción de envío. Ahora, abra el archivo Meaning.svelte y, en la etiqueta del script, exporte la propiedad word y cree una variable errorMessage :
export let word;
let errorMessage = "No connection. Check your internet";
A continuación, realice una solicitud GET a la API del Diccionario pasando la palabra como parámetro:
async function getWordMeaning(word) {
const response = await fetch(
`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`
);
const json = await response.json();
console.log(json);
if (response.ok) {
return json;
} else {
errorMessage = json.message;
throw new Error(json);
}
}
let promise = getWordMeaning(word);
En el bloque de código anterior, la función asincrónica devuelve los datos JSON si la respuesta es exitosa. La variable de promesa representa el resultado de la función getWordMeaning cuando se invoca.
En el marcado, defina un div con la clase página de significado. A continuación, defina un elemento h1 que contenga la variable palabra en minúsculas:
<div class="meaning-page">
<h1>
{word.toLowerCase()}
</h1>
</div>
A continuación, utilice los bloques de espera de Svelte para llamar a la función getWordMeaning:
{#await promise}
<p>Loading...</p>
{:then entries}
{:catch}
{errorMessage}
{/await}
Este código muestra el texto Cargando... cuando se realiza la solicitud GET a la API. Si hay un error, mostrará el contenido de errorMessage.
En el bloque {:then schools}, agregue lo siguiente:
{#each entries as entry}
{#each entry.meanings as meaning}
<div class="entry">
<div class="part-of-speech">
{meaning.partOfSpeech}
</div>
<ol>
{#each meaning.definitions as definition}
<li>
{definition.definition}
<br />
<div class="example">
{#if definition.example}
{definition.example}
{/if}
</div>
</li>
{/each}
</ol>
</div>
{/each}
{/each}
Si la promesa se resuelve correctamente, la variable entries contiene los datos resultantes.
Luego, para cada iteración de entrada y significado, este código representa la parte del discurso usando meaning.partOfSpeech y una lista de definiciones usando definición.definición. También mostrará una oración de ejemplo, si hay alguna disponible.
Eso es todo. Ha creado una aplicación de página única (SPA) de diccionario utilizando enrutamiento esbelto. Puedes ir más allá si lo deseas, o puedes consultar svelte-navigator, una bifurcación de svelte-routing.
Mejora de la experiencia del usuario con enrutamiento del lado del cliente
Hay muchos beneficios al manejar el enrutamiento en el navegador en lugar del servidor. Las aplicaciones que utilizan enrutamiento del lado del cliente pueden resultar más fluidas para el usuario final, especialmente cuando se combinan con animaciones y transiciones.
Sin embargo, si desea que su sitio web tenga una clasificación más alta en los motores de búsqueda, debería considerar manejar rutas en el servidor.