Svelte est un framework web à croissance rapide que vous pouvez utiliser pour construire des sites web. Il se présente comme une alternative légère et facile à utiliser aux frameworks populaires tels que React et Vue.
Chaque framework JavaScript populaire dispose d’une bibliothèque d’accompagnement que vous pouvez utiliser pour le routage. Découvrez comment Svelte vous permet de gérer vos URL et le code qui les manipule.
Bibliothèques de routage populaires
La bibliothèque de routage la plus populaire pour React est React Router, créée par l’équipe Remix. Pour VueJS, il y a Vue Router qui permet au développeur de contrôler finement toute navigation. Dans le monde Svelte, la bibliothèque de routage la plus populaire est svelte-routing.
L’autre bibliothèque de routage principale pour Svelte est svelte-navigator. Puisqu’il s’agit d’une fourche de svelte-routageil est utile de se familiariser d’abord avec cette bibliothèque.
Fonctionnement de la bibliothèque svelte-routing
Il existe trois composants importants pour gérer les itinéraires dans Svelte : Le routeur, Lien, et Itinéraire. Pour les utiliser dans votre application, il vous suffit d’importer ces utilitaires à partir du fichier svelte-routage bibliothèque.
<script>
import {Route, Router, Link} from "svelte-routing";
</script>
Le composant Router peut avoir deux accessoires optionnels : basepath et url. Les chemin de base est similaire à la propriété nom de base prop dans React Router.
Par défaut, il est défini sur « / ». basepath peut être utile si votre application a plusieurs points d’entrée. Par exemple, considérons le code Svelte suivant :
<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="https://www.makeuseof.com/">Go to home</Link>
<Link to="/user/david">Login as David</Link>
</div>
<main>
You are here: <code>{path}</code>
<Route path="https://www.makeuseof.com/">
<h1>Welcome Home!</h1>
</Route>
<Route path="/david">
<h1>Hello David!</h1>
</Route>
</main>
</Router>
Si vous exécutez ce code, vous remarquerez que lorsque vous cliquez sur le bouton Aller à l’accueil le navigateur navigue vers le chemin de base « /user ». Route définit le composant qui doit être rendu si le chemin d’accès correspond à la valeur de l’élément Route prop.
Vous pouvez définir les éléments à rendre à l’intérieur du composant Route ou en tant qu’élément séparé .svelte à condition d’importer ce fichier correctement. Par exemple :
<Route path="/about" component={About}/>
Le bloc de code ci-dessus indique au navigateur de rendre le fichier App lorsque le nom du chemin d’accès est « /about ».
Lors de l’utilisation de svelte-routage, définir des liens internes avec le Lien Composant au lieu de HTML traditionnel a éléments.
Ceci est similaire à la façon dont React Router gère les liens internes ; chaque composant Link doit avoir un élément pour qui indique au navigateur le chemin à suivre.
Lorsque le navigateur rend un composant Svelte, Svelte convertit automatiquement tous les composants Link en équivalent a en remplaçant les éléments à prop avec un href . Cela signifie que lorsque vous écrivez ce qui suit :
<Link to="/some/path">This is a Link Component in svelte-routing</Link>
Svelte le présente au navigateur comme :
<a href="/some/path">This is a Link Component in svelte-routing</a>
Vous devez utiliser le composant Link au lieu du composant traditionnel a lorsqu’on travaille avec svelte-routing. Cela est dû au fait que a rechargent la page par défaut.
Créer une SPA avec Svelte et Svelte-Routing
Il est temps de mettre en pratique tout ce que vous avez appris en créant une simple application de dictionnaire qui permet à l’utilisateur de rechercher des mots. Ce projet utilisera l’API Dictionnaire gratuite.
Pour commencer, assurez-vous que Yarn est installé sur votre machine et lancez :
yarn create vite
Ceci va créer un nouveau projet en utilisant l’outil de construction Vite. Nommez votre projet puis choisissez « Svelte » comme framework et « JavaScript » comme variante. Ensuite, exécutez les commandes suivantes l’une après l’autre :
cd <project_name>
yarn
yarn add svelte-routing
yarn dev
Ensuite, supprimez le contenu du fichier App.svelte et modifiez la structure du projet pour qu’il ressemble à ceci :
Dans l’illustration ci-dessus, vous pouvez voir qu’il y a un dossier « components » avec deux fichiers : Home.svelte et Sens.svelte. Sens.svelte est le composant qui s’affiche lorsque l’utilisateur recherche un mot.
Naviguez jusqu’à la page App.svelte et importez les composants Route, Router et Link de la bibliothèque svelte-routing. Veillez également à importer le composant Home.svelte et App.svelte composants.
<script>
import { Route, Router, Link } from "svelte-routing";
import Home from "./components/Home.svelte";
import Meaning from "./components/Meaning.svelte";
</script>
Créez ensuite un composant Router qui englobe un composant principal Élément HTML avec la classe « app ».
<Router>
<main class="app">
</main>
</Router>
Dans l’élément principal ajouter un élément nav avec un composant Link comme enfant. La propriété « to » de ce composant Link doit pointer vers « / ». Ce composant permettra à l’utilisateur de naviguer vers la page d’accueil.
<main class="app">
<nav>
<Link to="https://www.makeuseof.com/">Home</Link>
</nav>
</main>
Il est maintenant temps de travailler sur les routes. Lorsque l’utilisateur charge l’application, le composant Accueil Le composant doit être rendu.
La navigation vers « /find/:word » devrait rendre le composant Signification composant. La clause « :word » est un paramètre de chemin.
Pour ce projet, vous n’avez pas besoin de vous préoccuper des CSS. Remplacez simplement le contenu de votre propre app.css avec le contenu du fichier app.css de ce dépôt GitHub.
Il est maintenant temps de définir les routes. Le chemin au niveau de la racine doit rendre la balise Accueil tandis que « /find/:word » devrait rendre le composant Signification composant.
<Route path="https://www.makeuseof.com/" component={Home} />
<Route path="/find/:word" let:params>
<Meaning word={params.word} />
</Route>
Ce bloc de code utilise la fonction let pour passer le paramètre « word » à la directive Signification composant en tant qu’accessoire.
Maintenant, ouvrez le Accueil.svelte et importer le fichier naviguer de la bibliothèque « svelte-routing » et définir une variable motentré.
<script>
import { navigate } from "svelte-routing";
let enteredWord;
</script>
En vertu de la scénario créer un élément principal avec la classe « homepage », puis créer une balise div avec la classe « dictionnaire-texte ».
<main class="homepage">
<div class="dictionary-text">Dictionary</div>
</main>
Créez ensuite un formulaire avec un élément on:submit . Ce formulaire doit contenir deux enfants : un entrée dont la valeur est liée à l’élément motentré et un bouton de soumission qui est rendu conditionnellement dès que l’utilisateur commence à taper :
<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>
Ce bloc de code utilise la méthode naviguer pour rediriger l’utilisateur une fois l’action de soumission terminée. Maintenant, ouvrez le fichier Signification.svelte et, dans la balise script, exporter la balise mot l’accessoire et la création d’un errorMessage variable :
export let word;
let errorMessage = "No connection. Check your internet";
Ensuite, faites une requête GET à l’API Dictionnaire en passant la variable mot comme paramètre :
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);
Dans le bloc de code ci-dessus, la fonction asynchrone renvoie les données JSON si la réponse est positive. La variable promise représente le résultat de la fonction getWordMeaning lorsqu’elle est invoquée.
Dans le balisage, définissez une div avec la classe meaning-page. Ensuite, définissez un élément h1 qui contient l’élément mot variable en minuscules :
<div class="meaning-page">
<h1>
{word.toLowerCase()}
</h1>
</div>
Ensuite, utilisez les blocs await de Svelte pour appeler la fonction getWordMeaning fonction :
{#await promise}
<p>Loading...</p>
{:then entries}
{:catch}
{errorMessage}
{/await}
Ce code affiche le Chargement… lorsque la requête GET est faite à l’API. En cas d’erreur, il affichera le contenu de errorMessage.
Dans le {:then entries} ajouter ce qui suit :
{#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 promesse est résolue avec succès, le bloc entrées contient les données résultantes.
Ensuite, pour chaque itération de l’entrée et significationce code rend la partie du discours à l’aide de meaning.partOfSpeech et une liste de définitions utilisant definition.definition. Il rendra également une phrase d’exemple, s’il en existe une.
Voilà, c’est fait. Vous avez créé une application mono-page (SPA) de dictionnaire en utilisant svelte-routing. Vous pouvez aller plus loin si vous le souhaitez, ou vous pouvez consulter le site suivant svelte-navigator, une fourchette de svelte-routage.
Améliorer l’expérience utilisateur avec le routage côté client
Il y a de nombreux avantages à gérer le routage dans le navigateur plutôt que sur le serveur. Les applications qui utilisent le routage côté client peuvent sembler plus fluides à l’utilisateur final, en particulier lorsqu’elles sont associées à des animations et à des transitions.
Cependant, si vous souhaitez que votre site Web soit mieux classé dans les moteurs de recherche, vous devriez envisager de gérer les itinéraires sur le serveur.