Aller au contenu
useffect.sh
Planifier 30 min avec un senior
Interface

Expo Router

Le routeur d’Expo basé sur les fichiers : chaque fichier du dossier app devient un écran, avec deep links et routes typées automatiques.

Définition

Expo Router est la librairie de navigation d’Expo fondée sur les fichiers : chaque fichier ajouté dans le dossier app devient une route, les dossiers définissent les navigateurs imbriqués via des fichiers _layout, et la même arborescence sert sur Android, iOS et le web. Chaque écran est automatiquement accessible par deep link, les routes peuvent être typées statiquement, et les écrans natifs (stack, tabs) s’appuient sur React Native Screens. Il remplace la déclaration manuelle des navigateurs et de la configuration de linking qu’exigeait React Navigation seul, sur lequel Expo Router s’est historiquement construit. Depuis le SDK 56, le code applicatif n’importe plus les packages React Navigation directement, et depuis le SDK 58 Expo Router construit lui-même l’état de navigation complet à partir de l’URL ; la même version stabilise les loaders de données, le SSR, les middlewares et les onglets natifs. Vous le rencontrez dès qu’un projet Expo récent s’ouvre : c’est le défaut du template create-expo-app.

Dans une vraie app

Un projet Expo Router se reconnaît à son dossier app/ (ou src/app/), à un _layout.tsx racine qui rend Stack ou Tabs, à des groupes entre parenthèses comme (tabs) ou (auth) et à des routes dynamiques [id].tsx. La navigation passe par Link avec un href, ou par useRouter() (push, replace, back, dismissTo) ; useNavigation reste réservé aux API spécifiques du navigateur (événements, options). Les routes typées s’activent dans app.json avec experiments.typedRoutes et génèrent un fichier .d.ts qui transforme un lien vers une route inexistante en erreur TypeScript.

Le SDK 58 est une rupture pour les projets qui lisaient l’état de navigation ou utilisaient les paramètres screen, params et initial pour cibler un écran imbriqué : ce sont maintenant des paramètres utilisateur ordinaires, et le guide de migration recommande de naviguer vers un href complet. initialRouteName disparaît au profit de unstable_settings.anchor, et de nombreuses API de compatibilité de expo-router/react-navigation ont été retirées. Sur un projet qui a un routeur custom ou des navigation.dispatch, cette migration se budgète.

Ce que je vérifie : que les deep links sont testés avec npx uri-scheme open ou xcrun simctl openurl, que les écrans de la stack ne sont pas remontés en boucle à cause d’un _layout qui rend conditionnellement selon l’auth (préférer Redirect ou Stack.Protected), et que l’app n’importe pas @react-navigation/* à côté d’Expo Router.

Sources

Les 35 termes du glossaire

Un de ces sujets bloque votre app ?

30 minutes avec un senior pour regarder le problème dans votre code. Gratuit.