Dans ce module, découvre le puissant routing du framework React Router 7. D'une route simple aux cas les plus avancés, on passera en revue tous les concepts et comment les appliquer.
Le routing est un concept essentiel que tout développeur web se doit de maîtriser. Que tu développes un SPA, un site statique ou même un one-page, tu l'utilises déjà.
Le routing consiste à associer des URL à des composants spécifiques dans ton application React. Par exemple, l'URL monsite.com/contact pourrait afficher un formulaire de contact, tandis que monsite.com/a-propos afficherait une page d'informations sur ton entreprise.
React Router 7 simplifie grandement la gestion des routes grâce à une approche basée sur les fichiers. Chaque fichier dans le dossier app/routes correspond à une route spécifique. Cela rend le développement plus rapide et la maintenance plus facile.
routes.ts est personnalisable avec de nombreux plugins pour te simplifier davantage la tâche si tu le souhaites!Voici un exemple simple de création d'une route avec React Router 7 :
1export default function Index() {2return (3<div>4<h1>Bienvenue sur mon site !</h1>5</div>6);7}
Ce fichier crée automatiquement une route accessible à l'URL racine de ton site (monsite.com).
index.html qu'on a tous appris à créer. C'est finalement la route principale de toutes les applications web.Dans ce module on découvre ensemble le routing du framework React Router 7. C'est une des particularités de React Router 7 qui le différencie des autres frameworks comme NextJS ou Tanstack.
Nous allons repartir de zéro dans ce module, et se concentrer sur le routing.
1npx create-react-router@latest routing2cd routing3npm run dev
Nous verrons tous ces types de routes et leur but dans ce module :
Prépare-toi à maîtriser ce puissant routeur !