Front-end · 8 mondes · 32 étapes

React Native

De vraies applis iOS et Android avec React.

Progression

0 %

0/32 étapes terminées

← Décryptages

Intermédiaire · 8 min de lecture

Expo Router

La navigation qui se lit comme une arborescence

1Définition

Expo Router est un système de navigation basé sur les fichiers, construit au-dessus de React Navigation. Chaque fichier du dossier app/ est une route, et chaque route a une URL.

2Principes fondamentaux

01

Fichiers et URL

index.tsx est la racine d'un dossier, [param].tsx une route dynamique, [...reste].tsx attrape tous les segments restants, +not-found.tsx gère les routes inconnues.

02

Les layouts imbriqués

Chaque _layout.tsx enveloppe les routes de son dossier : une Stack racine peut contenir un groupe (tabs), qui contient à son tour ses écrans.

03

Navigation typée et liens profonds

Chaque écran étant une URL, les liens profonds et le web fonctionnent naturellement. Les routes typées peuvent vérifier tes href à la compilation.

3Exemples pratiques

Une app avec onglets et fiche détail

Exemple
1app/2├── _layout.tsx              // <Stack />3├── (tabs)/4│   ├── _layout.tsx          // <Tabs />5│   ├── index.tsx            // Accueil       /6│   └── cours.tsx            // Mes cours     /cours7├── lecon/8│   └── [id].tsx             // Leçon         /lecon/rn-flexbox9└── +not-found.tsx           // Page inconnue

La fiche leçon est hors du groupe d'onglets : elle s'ouvre par-dessus, dans la Stack racine, avec un bouton retour.

Passer et lire des paramètres

Exemple
1// Depuis la liste2router.push({ pathname: '/lecon/[id]', params: { id: 'rn-flexbox' } });3 4// Dans app/lecon/[id].tsx5const { id } = useLocalSearchParams<{ id: string }>();

La forme objet de router.push évite de construire les URL à la main.

4Erreurs courantes

Deux fichiers pour la même URL

À éviter

app/profil.tsxapp/(tabs)/profil.tsx

À faire

app/(tabs)/profil.tsx

Pourquoi : Les groupes n'apparaissent pas dans l'URL : les deux fichiers répondraient à /profil.

Oublier d'exporter le composant

À éviter

function Accueil() { … }

À faire

export default function Accueil() { … }

Pourquoi : Expo Router affiche l'export par défaut de chaque fichier de route.

Mettre des composants partagés dans app/

À éviter

app/Bouton.tsx

À faire

components/Bouton.tsx

Pourquoi : Tout fichier de app/ devient une route. Range les composants ailleurs.

5Subtilités à connaître

  • ◆router.replace remplace l'écran courant sans pouvoir y revenir : idéal après une connexion.
  • ◆useFocusEffect exécute du code à chaque fois qu'un écran redevient visible, contrairement à useEffect.
  • ◆Un _layout.tsx peut rediriger avec <Redirect href="/connexion" /> pour protéger un groupe de routes.

6Vérifie ta compréhension

Question 1/3

Score 0

Quelle URL pour app/(tabs)/cours.tsx ?

Envie d'essayer ? Ouvre le Labo et recopie les exemples pour les modifier.