Un guide de routage dans SvelteKit

SvelteKit est un framework permettant de créer des applications Web de toutes tailles, avec une grande expérience de développement et un routage flexible basé sur des fichiers. Le cadre combine les avantages du référencement et de l'amélioration progressive des applications d'une seule page avec la navigation rapide des applications rendues côté serveur. L'une des caractéristiques essentielles de SvelteKit est son système de routage.

Comprendre le routage SvelteKit

SvelteKit est un framework construit au sommet de Svelte. Dans SvelteKit, le routage suit un système basé sur des fichiers. Cela signifie que la structure des répertoires de vos pages détermine les routes de votre application.

Pour mieux comprendre le système de routage SvelteKit, commencez par créer un projet SvelteKit. Pour cela, exécutez le code suivant dans votre terminal :

npm create svelte@latest my-app

Après avoir exécuté le bloc de code ci-dessus, vous répondrez à une série d'invites pour configurer votre application.

Ensuite, installez les dépendances nécessaires pour votre projet. Pour faire ça CD dans votre projet et exécutez :

npm install

Ouvrez le projet sur le serveur de développement en exécutant la commande suivante dans votre terminal :

npm run dev

Maintenant, votre projet sera opérationnel sur http://localhost: 5173/. Lorsque vous ouvrirez l'application sur votre serveur de développement, vous aurez une interface similaire à l'image ci-dessous.

La route racine du projet ‘/’ correspond à un fichier nommé +page.svelte. Vous pouvez trouver le +page.svelte fichier suivant le chemin du fichier; src/routes dans votre projet.

Pour créer différents itinéraires dans SvelteKit, vous pouvez créer des dossiers dans votre src/routes annuaire. Chaque dossier correspondra à un itinéraire différent. Générer un +page.svelte fichier dans chaque dossier pour définir le contenu de cette route.

<main>
<h2> This is the about page h2>
main>

Le code ci-dessus vivra à l'intérieur du +page déposer. Vous allez créer un fichier svelte à l'intérieur du à propos dossier dans le src/routes annuaire. Ce fichier contiendra le contenu de la route. Pour afficher l'itinéraire dans votre navigateur Web, accédez à http://localhost: 5173/environ.

Naviguer vers le /about route affichera cette interface sur votre écran :

Comprendre les routes imbriquées

Les routes imbriquées sont un moyen de structurer le système de routage dans une application Web. Dans une structure de routes imbriquées, les routes sont placées dans d'autres routes, créant une relation hiérarchique entre elles. Vous pouvez créer des routes imbriquées dans SvelteKit en plaçant des dossiers avec le +page.svelte fichier à l'intérieur d'autres dossiers d'itinéraire sous le src/routes annuaire.

Par exemple:

Dans cet exemple, vous imbriquez le poste itinéraire à l'intérieur du Blog itinéraire. Pour imbriquer le poste itinéraire à l'intérieur du Blog route, créer le poste dossier et son +page.svelte fichier à l'intérieur du Blog dossier d'itinéraire.

Pour accéder à la route du blog dans votre application, ouvrez votre navigateur Web et accédez à http://localhost: 5173/blog.

Le parcours postal sera disponible sur http://localhost: 5173/blog/article.

Mises en page et routes d'erreur

SvelteKit définit un disposition de l'application d'une manière similaire à Next.js. Les deux cadres utilisent un mise en page composant pour définir la structure de l'application.

SvelteKit utilise le +mise en page.svelte pour définir une mise en page pour un groupe de pages. Vous pouvez créer un +mise en page.svelte dossier dans le src/routes répertoire pour définir une mise en page pour toutes les pages de votre application ou dans un sous-répertoire pour définir une mise en page pour un groupe spécifique de pages.

Voici un exemple de définition d'un routage de mise en page pour l'ensemble de votre application :

L'exemple ci-dessus fournit un itinéraire de mise en page. Le dossier contient un h1 élément qui affiche le texte "Ceci est une application SvelteKit." Il comprend également un fente élément. Le fente L'élément est un élément spécial qui définit l'emplacement où l'application affichera le contenu de vos itinéraires dans la mise en page. Cela fonctionne de la même manière que les composants Vue.

Dans ce cas, votre application affichera le contenu de vos routes sous le h1 élément.

Pour définir une page d'erreur, créez un fichier nommé +erreur.svelte dans le src/routes annuaire. Cette page s'affichera lorsqu'une erreur se produit lors du rendu.

Par exemple:

Lorsque vous rencontrez une erreur, telle que la navigation vers une route inexistante, votre application reviendra à cette erreur itinéraire à la place.

Par exemple:

La route http://localhost: 5173/aller n'existe pas, donc l'application rend le erreur itinéraire à la place.

Naviguer entre les pages

Trouver le meilleur moyen de naviguer entre les itinéraires que vous créez est crucial pour une bonne expérience. Traditionnellement, le routage basé sur les fichiers dans la plupart des technologies utilise des liens pour naviguer entre les différentes pages. Pour naviguer entre les pages de SvelteKit, vous pouvez utiliser une simple balise d'ancrage HTML.

Par exemple, vous pouvez écrire ce code dans n'importe quelle route que vous voulez, mais vous devez l'écrire dans le mise en page itinéraire au-dessus de la fente étiqueter:

<ul>
<li>
<ahref="/">Homea>
li>
<li>
<ahref="/about">Abouta>
li>
<li>
<ahref="/blog">Bloga>
li>
<li>
<ahref="/blog/post">Posta>
li>
ul>

En cliquant sur n'importe quelle balise d'ancrage, vous accédez à l'itinéraire correspondant.

Routage dynamique dans SvelteKit

Le routage dynamique vous permet de créer progressivement des routes que l'application génère en fonction de données ou de paramètres. Il vous permet de créer des applications Web flexibles et dynamiques qui gèrent différents itinéraires et affichent le contenu en fonction de données ou de paramètres spécifiques.

Pour créer une route dynamique dans SvelteKit, créez un dossier nommé [limace] puis un +page.svelte fichier dans le dossier pour définir le contenu de la route. Notez que vous pouvez nommer le dossier comme bon vous semble, mais assurez-vous de toujours mettre le nom entre crochets [ ].

Voici un exemple de route dynamique :

Pour accéder à cet itinéraire dans votre navigateur Web, accédez à ce lien http://localhost: 5173/[limace], où [limace] peut être n'importe quel nom de route indéfini unique que vous choisissez.

Vous pouvez accéder à votre application [limace] paramètre à l'aide du $page.params données de $app/magasins.

Par exemple:

<scriptlang='ts'>
 import { page } from '$app/stores'
 const params = $page.params;
script>
<main>
<h1>This is the {params.slug} pageh1>
main>

Ici, vous attribuez le $page.params s'opposer à la paramètre variable et rendre la param.slug données dans votre application.

L'application récupère les param.slug données de votre lien. Par exemple, si vous accédez à http://localhost: 5173/feu, le contenu affiché sur l'application sera "C'est la page du feu."

Vous connaissez maintenant les bases du routage dans SvelteKit

Le routage dans SvelteKit est une fonctionnalité puissante qui vous permet de structurer votre application de manière logique. Comprendre comment utiliser cette fonctionnalité vous permettra de créer des applications Web plus efficaces et conviviales. Qu'il s'agisse de créer un petit projet personnel ou une application à grande échelle, le système de routage de SvelteKit dispose des outils dont vous avez besoin pour réussir.