📝 Exercices — R10 React Router

Configurez React Router en enveloppant votre application dans BrowserRouter et en définissant des routes avec Routes. Créez 3 routes : /, /about et * (404).

// Votre code ici — configuration BrowserRouter import { BrowserRouter, Routes, Route } from 'react-router-dom'; function App() { return ( // Envelopper dans BrowserRouter // Définir Routes > Route ); }

Créez 4 pages (Home, Blog, Contact, NotFound) et configurez les routes correspondantes. Chaque Route doit avoir un path et un element.

// Votre code ici — Routes avec path= et element= import { BrowserRouter, Routes, Route } from 'react-router-dom'; function Home() { return <h1>Accueil</h1>; } function Blog() { return <h1>Blog</h1>; } function Contact() { return <h1>Contact</h1>; } function NotFound(){ return <h1>404</h1>; } function App() { /* Routes */ }

Créez une barre de navigation avec Link et NavLink. Le NavLink doit appliquer un style différent quand le lien est actif via la prop className ou style avec la fonction { isActive }.

// Votre code ici — Link et NavLink import { Link, NavLink } from 'react-router-dom'; function Navbar() { return ( <nav> <Link to="/">Accueil</Link> {/* NavLink avec style actif */} </nav> ); }

Créez un formulaire de connexion qui redirige vers /dashboard après soumission avec useNavigate. Ajoutez aussi un bouton retour avec navigate(-1).

// Votre code ici — useNavigate pour redirection import { useNavigate } from 'react-router-dom'; function LoginForm() { const navigate = useNavigate(); function handleSubmit(e) { e.preventDefault(); // navigate() vers /dashboard } }

Créez une liste d'articles et une page de détail. La route de détail utilise /articles/:id. Dans ArticleDetail, récupérez l'id avec useParams pour afficher l'article correspondant.

// Votre code ici — Route dynamique + useParams import { Routes, Route, Link, useParams } from 'react-router-dom'; const articles = [{ id: 1, titre: 'React Hooks' }, { id: 2, titre: 'Router' }]; function ArticleDetail() { const { id } = useParams(); // Trouver l'article avec parseInt(id) }

Créez une liste paginée filtrée par catégorie. L'état de la pagination et du filtre doit vivre dans l'URL (ex: ?page=2&cat=react) via useSearchParams.

// Votre code ici — useSearchParams pour pagination import { useSearchParams } from 'react-router-dom'; function BlogList() { const [searchParams, setSearchParams] = useSearchParams(); const page = parseInt(searchParams.get('page') || '1'); // setSearchParams({ page: page + 1 }) pour changer la page }

Créez un layout avec navbar persistante qui utilise <Outlet /> pour afficher les pages enfants. Les routes blog et blog/:slug doivent être imbriquées dans la route parente.

// Votre code ici — Layout avec Outlet + routes imbriquées import { Routes, Route, Outlet, NavLink, Link, useParams } from 'react-router-dom'; function Layout() { return ( <div> <nav>/* NavLink ici */</nav> <Outlet /> {/* pages enfants */} </div> ); } function App() { return ( <Routes> <Route path="/" element={<Layout />}> {/* Routes enfants imbriquées */} </Route> </Routes> ); }

Créez un composant RequireAuth qui redirige vers /login avec <Navigate to="/login" replace /> si l'utilisateur n'est pas connecté. Protégez les routes /dashboard et /profile.

// Votre code ici — routes protégées avec Navigate import { Navigate, Outlet, useNavigate } from 'react-router-dom'; function RequireAuth() { const { user } = useAuth(); // depuis votre AuthContext if (!user) return <Navigate to="/login" replace />; return <Outlet />; } // Protéger des routes dans App : // <Route element={<RequireAuth />}> // <Route path="/dashboard" element={<Dashboard />} /> // </Route>

Utilisez useLocation pour créer un composant Breadcrumb qui affiche le chemin actuel sous forme de liens cliquables (ex: Accueil / blog / mon-article). Basez-vous sur location.pathname.

// Votre code ici — useLocation + fil d'Ariane import { useLocation, Link } from 'react-router-dom'; function Breadcrumb() { const location = useLocation(); const parts = location.pathname.split('/').filter(Boolean); // Générer les liens pour chaque partie du chemin }

Créez une mini-application e-commerce avec : layout, page accueil, liste produits (/produits), détail produit (/produits/:id), login et dashboard protégé. Utilisez useParams, NavLink, RequireAuth et Navigate.

// Votre code ici — application complète import { BrowserRouter, Routes, Route, Link, NavLink, useParams, useNavigate, Navigate, Outlet } from 'react-router-dom'; // Layout, RequireAuth, pages Home/Login/Dashboard/ProduitList/ProduitDetail // Routes imbriquées + route protégée dashboard