Lorsque vous naviguez sur une application SvelteKit, vous créez des _entrées d'historique_. Des
clics sur les boutons "Précédent" et "Suivant" vont parcourir cette liste d'entrées, ré-exécutant
tout fonction `load` concernées et remplaçant les composants de page lorsque nécessaire.

Parfois, il est pratique de créer des entrées d'historique _sans_ naviguer. Par exemple, vous
pourriez vouloir afficher une modale de dialogue que l'utilisateur ou l'utilisatrice puisse faire
disparaître en appuyant sur le bouton "Précédent" du navigateur. Ceci est particulièrement utile sur
les appareils mobiles, où utiliser les mouvements des doigts sont souvent plus naturels
qu'interagire directement avec l'interface. Dans ces cas-là, une modale _non-associée_ à une entrée
d'historique peut être une source de frustration, puisqu'un utilisateur ou utilisatrice pourrait
faire glisser son doigt vers la gauche pour tenter de fermer la modale, pour au final se retrouver
sur la mauvaise page.

SvelteKit rend cela possible grâce aux fonctions [`pushState`]($app-navigation#pushState) et
[`replaceState`]($app-navigation#replaceState), qui vous permettent d'associer un état avec une
entrée d'historique sans avoir à naviguer. Par exemple, pour implémenter une modale liée à
l'historique :

```svelte
<!--- file: +page.svelte --->
<script>
	import { pushState } from '$app/navigation';
	import { page } from '$app/state';
	import Modal from './Modal.svelte';

	function showModal() {
		pushState('', {
			showModal: true
		});
	}
</script>

{#if page.state.showModal}
	<Modal close={() => history.back()} />
{/if}
```

La modale peut être fermée en naviguant vers l'arrière (en désactivant `page.state.showModal`) ou en
interagissant avec elle de sorte à exécuter le callback `close`, ce qui déclenchera la navigation
arrière programmatiquement.

## API

Le premier argument de `pushState` est l'URL, relative à l'URL courante. Pour rester sur l'URL
courante, utilisez `''`.

Le deuxième argument est l'état de la nouvelle page, auquel vous pouvez avoir accès via l'[objet de
page]($app-state#page) en tant que `page.state`. Vous pouvez typer l'état de page en déclarant une
interface [`App.PageState`](types#PageState) (en général dans `src/app.d.ts`).

Pour définir l'état de page sans créer une nouvelle entrée d'historique, utilisez `replaceState`
plutôt que `pushState`.

> [!LEGACY]
> `page.state` importé depuis `$app/state` a été ajouté dans la version 2.12 de SvelteKit. Si vous
> utilisez une version antérieure ou si vous utilisez Svelte 4, utilisez plutôt `$page.state`
> importé depuis `$app/stores`.

## Charger des données pour une route [!VO]Loading data for a route

Lorsque vous utilisez le shallow routing, vous pourriez vouloir afficher une autre `+page.svelte` à
l'intérieur de la page courante. Par exemple, on peut imaginer un clic sur une vignette de photo qui
viendrait afficher le détail de la photo sans avoir à naviguer vers la page de la photo.

Pour que cela fonctionne, vous avez besoin de charger les données attendues par `+page.svelte`. Une
manière pratique de faire cela est d'utiliser la fonction
[`preloadData`]($app-navigation#preloadData) au sein du gestionnaire de `click` d'un élément `<a>`.
Si l'élément (ou un parent) utilise
[`data-sveltekit-preload-data`](link-options#data-sveltekit-preload-data), les données auront déjà
été demandées, et `preloadData` utilisera alors cette requête.

```svelte
<!--- file: src/routes/photos/+page.svelte --->
<script>
	import { preloadData, pushState, goto } from '$app/navigation';
	import { page } from '$app/state';
	import Modal from './Modal.svelte';
	import PhotoPage from './[id]/+page.svelte';

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

{#each data.thumbnails as thumbnail}
	<a
		href="/photos/{thumbnail.id}"
		onclick={async (e) => {
			if (innerWidth < 640        // ignore si l'écran est trop petit
				|| e.shiftKey             // ou si le lien est ouvert dans une autre fenêtre
				|| e.metaKey || e.ctrlKey // ou un nouvel onglet (mac: metaKey, win/linux: ctrlKey)
				// on devrait en théorie également considérer un clic avec le bouton de défilement de la
				// souris
			) return;

			// empêche la navigation
			e.preventDefault();

			const { href } = e.currentTarget;

			// ré-exécute les fonctions `load` (ou plutôt, récupère le résultat des fonctions `load` qui
			// sont déjà en cours à cause de `data-sveltekit-preload-data`)
			const result = await preloadData(href);

			if (result.type === 'loaded' && result.status === 200) {
				pushState(href, { selected: result.data });
			} else {
				// quelque chose s'est mal passé ! on essaie de naviguer
				goto(href);
			}
		}}
	>
		<img alt={thumbnail.alt} src={thumbnail.src} />
	</a>
{/each}

{#if page.state.selected}
	<Modal onclose={() => history.back()}>
		<!-- fournit les données de page au composant +page.svelte
				 comme le ferait SvelteKit lors d'une navigation -->
		<PhotoPage data={page.state.selected} />
	</Modal>
{/if}
```

## Inconvénients [!VO]Caveats

Lors du rendu côté serveur,`page.state` est toujours un objet vide. C'est également le cas pour la
première page sur laquelle l'utilisateur ou l'utilisatrice arrive — si cette personne recharge la
page (ou revient depuis un autre site), l'état ne sera _pas_ appliqué avant la navigation suivante.
During server-side rendering, `page.state` is always an empty object. The same is true for the fir

Le shallow routing est une fonctionnalité qui nécessite JavaScript pour fonctionner. Soyez-en
conscient•e lorsque vous vous en servez et essayez de penser à un comportement de remplacement dans
les cas où JavaScript ne serait pas disponible.