SvelteKit rend disponibles en lecture seule trois objets d’état via le module $app/state — page, navigating, et updated. Celui que vous utiliserez le plus souvent est page, qui fournit des informations sur la page courante :

• url — l’URL de la page courante
• params — les paramètres de la page courante
• route — un objet avec une propriété id représentant la route courante
• status — le code de statut HTTP de la page courante
• error — l’objet d’erreur de la page courant, s’il y en a (vous pouvez en savoir plus sur la gestion des erreurs dans des exercices à venir)
• data — les données de la page courante, combinant les valeurs de retour de toutes les fonctions load
• form — les données renvoyées par une action de formulaire

Chacune de ces propriétés est réactive, utilisant $state.raw sous le capot. Voici un exemple qui utilise page.url.pathname :

<script>
	import { page } from '$app/state';

	let { children } = $props();
</script>

<nav>
	<a href="/" aria-current={page.url.pathname === '/'}>
		accueil
	</a>

	<a href="/about" aria-current={page.url.pathname === '/about'}>
		à propos
	</a>
</nav>

{@render children()}

<script lang="ts">
	import { page } from '$app/state';

	let { children } = $props();
</script>

<nav>
	<a href="/" aria-current={page.url.pathname === '/'}>
		accueil
	</a>

	<a href="/about" aria-current={page.url.pathname === '/about'}>
		à propos
	</a>
</nav>

{@render children()}

Avant SvelteKit 2.12, vous deviez utiliser $app/stores pour cela, qui fournit un store $page contenant les mêmes informations. Si vous utilisez actuellement $app/stores, nous vous conseillons de migrer vers $app/state (ce qui requiert Svelte 5).