Ajouter des routes
Faire que ton serveur réponde à différentes URLs
⏱ Estim. ~8 min
01 · Lire
Ton serveur ne répond pour l'instant qu'à une seule URL : la racine /. Si tu vas sur localhost:3000/about ou localhost:3000/anything-else, tu auras une erreur.
Les vrais sites ont beaucoup de pages — accueil, à propos, contact, fiches produit, et plus encore. Chaque page a sa propre route — un chemin d'URL que le serveur sait gérer.
Ajouter des routes, c'est comme ça que tu apprends à ton serveur à renvoyer du contenu différent selon l'URL. Chaque appel app.get() crée une nouvelle route.
💡 Imagine çaImagine que les routes sont l'accueil d'un bureau. Quelqu'un demande le service commercial, l'accueil le dirige vers une pièce. Quelqu'un demande le support client, il est dirigé vers une autre pièce. Ton serveur est l'accueil, les routes sont les directions.
Points clés
- Chaque app.get('/path', ...) crée une nouvelle route
- Le path, c'est ce qui vient après localhost:3000 dans l'URL
- Des routes différentes peuvent renvoyer du contenu complètement différent
- C'est comme ça que chaque site sert différentes pages
02 · Pratique réelle
Ouvre app.js dans ton éditeur de texte et ajoute ces deux nouvelles routes. Mets-les après ta route app.get('/') actuelle, mais avant la ligne app.listen().
app.get('/about', (req, res) => {
res.send('This is the about page. I built this server myself!');
});
app.get('/contact', (req, res) => {
res.send('Contact me at: hello@mysite.com');
});03 · Pratique réelle
Ton serveur tourne toujours avec l'ancien code. Pour voir les changements, tu dois arrêter le serveur et le redémarrer. Retourne dans le terminal où le serveur tourne, appuie sur Ctrl+C pour l'arrêter, puis redémarre-le.
node app.js
04 · Quiz
Dans app.get('/about', handler), que représente /about ?
- Le nom du fichier à envoyer
- Le chemin d'URL qui déclenche ce handler
- Un dossier sur l'ordi
- Un nom de variable
05 · Compléter
Dans Express, app.get('/about', ...) crée une route qui répond au chemin _____.
06 · Pratique réelle
Teste maintenant tes nouvelles routes ! Ouvre ton navigateur et va sur ces deux URLs : 1. http://localhost:3000/about — devrait afficher le texte de ta page about 2. http://localhost:3000/contact — devrait afficher le texte de ta page contact Essaie aussi http://localhost:3000 pour vérifier que la route d'origine fonctionne toujours.
http://localhost:3000/about
http://localhost:3000/contact
07 · Quiz
Ton serveur a des routes pour /, /about et /contact. Un utilisateur visite http://localhost:3000/pricing. Que se passe-t-il ?
- Express crée automatiquement une page pricing
- Le serveur plante avec une erreur
- Le serveur renvoie une erreur "Cannot GET /pricing", parce qu'aucune route ne matche ce chemin
- La requête est redirigée vers la route /
Autres leçons de ce chapitre
⚠ L'expérience interactive complète nécessite JavaScript. Active-le et recharge la page.
※ Ce site est un projet éducatif indépendant — pas un produit officiel d'Anthropic. Claude™ est une marque déposée d'Anthropic, PBC.