Expo Router : le file-based routing débarque sur mobile

01Pourquoi c'est mieux que React Navigation

Plus besoin de déclarer chaque écran dans un fichier de config. Un fichier `app/home.tsx` crée automatiquement la route `/home`. Les paramètres dynamiques (`app/posts/[id].tsx`) fonctionnent comme attendu. Le deep linking est automatique : si quelqu'un clique sur `exemple.app://posts/123` depuis un email ou une notif push, l'app ouvre directement le bon écran. Plus de routage à déclarer manuellement. La structure du dossier app/ EST l'arborescence de navigation.

// Structure de fichiers Expo Router
app/
├── _layout.tsx    // racine (Stack root)
├── (tabs)/        // groupe sans URL (tabs)
│   ├── _layout.tsx
│   ├── index.tsx  // /
│   ├── posts.tsx  // /posts
│   └── profile.tsx
├── posts/
│   ├── [id].tsx   // /posts/:id
│   └── new.tsx    // /posts/new
└── auth/
    ├── login.tsx
    └── signup.tsx

02Layouts imbriqués pour Stack, Tabs, Drawer

Les fichiers `_layout.tsx` définissent les Stack, Tabs ou Drawer pour leur sous-arbre. Comme dans Next.js, on compose des layouts imbriqués selon la profondeur. La logique de header, tab bar et navigation se trouve exactement où on l'attend dans la structure de fichiers. Pour un layout Tabs (Instagram-like), on crée un groupe `(tabs)/_layout.tsx` qui contient `<Tabs>...</Tabs>`. Pour des écrans modaux (auth, paramètres), on les place hors du groupe tabs.

// app/(tabs)/_layout.tsx
import { Tabs } from 'expo-router'

export default function TabsLayout() {
  return (
    <Tabs>
      <Tabs.Screen name="index" options={{ title: 'Accueil' }} />
      <Tabs.Screen name="posts" options={{ title: 'Posts' }} />
      <Tabs.Screen name="profile" options={{ title: 'Profil' }} />
    </Tabs>
  )
}

03Deep linking et universal links

Le deep linking était traditionnellement un cauchemar à configurer sur React Native (URL schemes custom, intent filters Android, universal links Apple, fallback web). Expo Router gère TOUT cela automatiquement à partir de la structure de fichiers. Configuration en 3 lignes dans app.config.ts : scheme custom + associatedDomains pour iOS + intentFilters pour Android. Et n'importe quel chemin de votre dossier app/ devient un deep link valide. Cas d'usage : campagnes marketing avec liens directs vers une fiche produit, notifications push qui ouvrent un écran spécifique, magic links pour authentification.

04Typed routes pour la robustesse

Expo Router intègre depuis 2025 un système de typed routes (similaire à Next.js typedRoutes). En activant l'expérimentation, vous obtenez des types TypeScript autogénérés pour vos routes. Naviguer vers une route inexistante devient une erreur de build, pas un crash runtime. C'est le même esprit que les types Prisma pour la DB : la stack devient end-to-end typed.

// app.config.ts
export default {
  expo: {
    experiments: { typedRoutes: true }
  }
}

// Usage : autocomplete + erreurs de build
import { router } from 'expo-router'
router.push('/posts/123') // ✅ OK
router.push('/post/123')  // ❌ Erreur TS — pas de route /post

05Migration depuis React Navigation : étape par étape

Pas urgente : si votre app existante fonctionne bien sur React Navigation, vous pouvez rester. Pour les nouveaux projets, Expo Router est notre choix par défaut depuis 2025. Pour migrer : 1) Mettre à jour vers Expo SDK 50+. 2) Installer expo-router. 3) Créer le dossier app/ avec un _layout.tsx racine. 4) Déplacer un écran à la fois depuis l'ancien NavigationContainer vers app/. 5) Remplacer navigation.navigate() par router.push() ou <Link>. 6) Tester chaque écran. Compter 2-3 jours pour une app de 15-20 écrans. La cohabitation pendant la migration est possible (mixer les deux systèmes temporairement).

06Cas d'usage avancés : modal, search, web

Expo Router gère bien les patterns mobile modernes : modals via la propriété `presentation: 'modal'`, recherche globale via un screen layout particulier, gestures de retour Apple/Android natif. Bonus : Expo Router fonctionne aussi sur le WEB (Expo for Web). Vous pouvez déployer la même base de code en app + web responsive — gain massif pour les startups en early stage qui veulent prototyper rapidement avant de décider plateforme cible.

07Limites et points d'attention

Pas parfait : 1) L'écosystème de plugins React Navigation est plus large, certaines fonctionnalités exotiques (transitions custom complexes, navigation gesturelle très fine) demandent un peu plus de travail. 2) Le debugger des routes peut être moins ergonomique que celui de Navigation. 3) Pour les apps avec architecture très custom (multi-tenant avec routing dynamique selon le user), il faut un peu plus de gymnastique. Mais ces limites sont marginales pour 95% des projets.