Scribd
Importer
47 vues2 pages

Exercice Routing

Le document présente un exercice de développement d'une mini-application 'Profil Utilisateur' utilisant React, avec un accent sur l'utilisation de useNavigate et useParams pour la navigation dynamique dans une application à page unique (SPA). Les étapes incluent la création de données simulées, le routage dans App.js, et la mise en place des pages Home.jsx et UserProfile.jsx pour afficher et naviguer entre les profils d'utilisateurs. Des fonctionnalités supplémentaires sont proposées en bonus, telles qu'un champ de recherche et la gestion des erreurs 404.

Transféré par

ayoub laghzal
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
47 vues2 pages

Exercice Routing

Le document présente un exercice de développement d'une mini-application 'Profil Utilisateur' utilisant React, avec un accent sur l'utilisation de useNavigate et useParams pour la navigation dynamique dans une application à page unique (SPA). Les étapes incluent la création de données simulées, le routage dans App.js, et la mise en place des pages Home.jsx et UserProfile.jsx pour afficher et naviguer entre les profils d'utilisateurs. Des fonctionnalités supplémentaires sont proposées en bonus, telles qu'un champ de recherche et la gestion des erreurs 404.

Transféré par

ayoub laghzal
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

OFPPT/DRPS/ISGI LAAYOUNE

Filière : Développement digital option Web Full stack

Module : Développer en Front End (REACT)

Travaux Dirigés Routage (useParams,useNavigate)

Formateur : A BENAOUD

Exercice : Mini-appli "Profil Utilisateur"


Objectifs pédagogiques

 Utiliser useNavigate pour naviguer vers un profil à partir d’une liste.


 Utiliser useParams pour afficher dynamiquement le contenu d’un profil.
 Comprendre la navigation dynamique dans une SPA.

Contexte
Tu es en train de créer une application qui affiche une liste d’utilisateurs. Lorsqu'on clique sur
un nom, on accède à une page de profil contenant des informations spécifiques.

src/

├── App.js

├── pages/

│ ├── Home.jsx

│ └── UserProfile.jsx

└── data/

└── users.js

Étape 1 : Données simulées


Dans data/users.js, crée un tableau de profils :

export const users = [


{ id: "1", name: "Alice", email: "[email protected]" },

{ id: "2", name: "Bob", email: "[email protected]" },

{ id: "3", name: "Charlie", email: "[email protected]" },];


Étape 2 : Routing dans App.js
Étape 3 : Page Home.jsx
 Afficher la liste des utilisateurs.
 Ajouter un bouton ou un lien pour accéder au profil.
 Utiliser useNavigate.

Étape 4 : Page UserProfile.jsx


 Lire l’id depuis l’URL avec useParams.
 Chercher les infos de l’utilisateur correspondant.
 Afficher ses données.
 Ajouter un bouton de retour avec useNavigate(-1).

Résultat attendu
 À l’ouverture, une liste de noms avec bouton "Voir Profil".
 Au clic, redirection vers /user/:id avec les infos.
 Possibilité de revenir à la liste avec un bouton.

Bonus pour aller plus loin


 Ajouter un champ de recherche sur la page d’accueil.
 Ajouter une redirection vers /user/:id après une connexion simulée.
 Gérer le cas où un id n’existe pas dans la liste (404 local).

Vous aimerez peut-être aussi