Cours Svelte et SvelteKit · Module 11: Routage SvelteKit
Drakkar - Routage SvelteKit
Dans cette leçon5
Bienvenue au port de Hedeby ! Les drakkars vikings sont prêts pour le grand voyage. SvelteKit est notre navire pour construire des applications fullstack complètes !
Qu'est-ce que SvelteKit ?
SvelteKit est un framework fullstack pour Svelte :
- Routage basé sur les fichiers
- SSR, SSG, CSR
- Routes API
- Actions de formulaire
Dans cette partie du monde, nous naviguons avec SvelteKit 3 et Svelte 5.
Un nouveau projet
npx sv create mon-voyage
cd mon-voyage
npm run devL'assistant sv te demande un modèle et des modules complémentaires (par exemple TypeScript). La configuration de SvelteKit, adaptateur compris, se trouve dans vite.config.js : SvelteKit 3 n'a plus de fichier svelte.config.js séparé.
Structure des répertoires
src/
├── routes/
│ ├── +page.svelte # /
│ ├── +layout.svelte # Layout pour toutes les pages
│ ├── about/
│ │ └── +page.svelte # /about
│ ├── warriors/
│ │ ├── +page.svelte # /warriors
│ │ └── [id]/
│ │ └── +page.svelte # /warriors/123
│ └── api/
│ └── warriors/
│ └── +server.js # /api/warriors
├── lib/ # Code partagé, importé via #lib
│ └── components/
└── app.html
vite.config.js # Configuration de Vite et de SvelteKitPage de base
<!-- src/routes/+page.svelte -->
<script>
let name = 'Viking';
</script>
<h1>Bienvenue, {name} !</h1>
<a href="/warriors">Voir les guerriers</a>Pour aller sur une autre page, un simple lien <a href> suffit. SvelteKit intercepte le clic et remplace la page sans recharger le navigateur.
Navigation
<script>
import { goto } from '$app/navigation';
function goToWarriors() {
goto('/warriors');
}
</script>
<!-- Lien -->
<a href="/warriors">Guerriers</a>
<!-- Navigation programmatique -->
<button onclick={goToWarriors}>Aller aux guerriers</button>Le drakkar est prêt - nous naviguons à travers le routage SvelteKit !
Code de cette leçon : App.svelte
<script>
// Drakkar - Naviguer sur les mers de SvelteKit
// Simulation de la structure de routage
let currentPath = $state('/');
const routes = [
{ path: '/', name: 'Page d’accueil', icon: '' },
{ path: '/warriors', name: 'Guerriers', icon: '' },
{ path: '/warriors/ragnar', name: 'Ragnar', icon: '' },
{ path: '/ships', name: 'Navires', icon: '' },
{ path: '/about', name: 'À propos', icon: 'ℹ' }
];
function navigate(path) {
currentPath = path;
}
</script>
<main class="drakkar">
<h1>Drakkar - Routage SvelteKit</h1>
<section class="structure">
<h2>Structure des dossiers</h2>
<pre>
src/routes/
├── +page.svelte → /
├── +layout.svelte → Layout
├── warriors/
│ ├── +page.svelte → /warriors
│ └── [id]/
│ └── +page.svelte → /warriors/:id
├── ships/
│ └── +page.svelte → /ships
└── about/
└── +page.svelte → /about
</pre>
</section>
<nav class="nav">
{#each routes as route}
<button
class:active={currentPath === route.path}
onclick={() => navigate(route.path)}
>
{route.icon} {route.name}
</button>
{/each}
</nav>
<section class="content">
<h2>Chemin actuel : {currentPath}</h2>
{#if currentPath === '/'}
<p>Bienvenue au pays des Vikings !</p>
{:else if currentPath === '/warriors'}
<p>Liste de tous les guerriers</p>
{:else if currentPath === '/warriors/ragnar'}
<p>Profil du guerrier : Ragnar Lothbrok</p>
{:else if currentPath === '/ships'}
<p>Notre flotte de Drakkars</p>
{:else if currentPath === '/about'}
<p>À propos de notre clan</p>
{/if}
</section>
</main>
<style>
.drakkar {
font-family: 'Georgia', serif;
max-width: 600px;
margin: 0 auto;
padding: 2rem;
background: #0a1628;
color: #b8d4f7;
min-height: 100vh;
}
h1 {
color: #4a90d9;
text-align: center;
}
section {
background: rgba(74, 144, 217, 0.1);
border: 1px solid #4a90d9;
border-radius: 8px;
padding: 1rem;
margin: 1rem 0;
}
h2 {
color: #4a90d9;
font-size: 1rem;
margin-top: 0;
}
pre {
background: rgba(0,0,0,0.5);
padding: 1rem;
border-radius: 4px;
font-size: 0.85rem;
overflow-x: auto;
}
.nav {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 1rem 0;
}
button {
padding: 0.5rem 1rem;
background: #1e3a5f;
color: #b8d4f7;
border: 1px solid #4a90d9;
border-radius: 4px;
cursor: pointer;
}
button.active {
background: #4a90d9;
color: #0a1628;
}
.content {
min-height: 100px;
}
</style>Tu as repéré une erreur dans cette leçon ?
Teste tes connaissances
Réponds aux questions de cette leçon. Choisis une réponse pour voir tout de suite si elle est correcte.
1. Comment SvelteKit détermine-t-il le routing ?
Tâches pratiques dans le jeu
- Éditeur de code
Complète le code de navigation