Différences

Ci-dessous, les différences entre deux révisions de la page.

--- front:routage [2025/09/29 10:13] – [Mettre en place un router] paolo
+++ front:routage [Date inconnue] (Version actuelle) – supprimée - modification externe (Date inconnue) 127.0.0.1
@@ Ligne 1: / Ligne 1: @@
-# Routage
-Documentation [React-router-dom](https://reactrouter.com/home)
-**React-router-dom** est la lib la plus utilisée pour gérer le routage dans une application React. Elle met à disposition des composants permettant d'afficher des pages sans recharger l'application (**Single Page Application**) selon l'url ainsi que des hooks facilitant son utilisation
-.
-### Mettre en place un router
-Voyons ce que nous pouvons faire avec notre page **Login**:
-  * Nous rajoutons un dossier ''Router'' et son ''index.jsx'' par exemple.
-```
-// src/components/app/Router/index.jsx
-import { Login } from "../../pages/Login";
-import { Error404 } from "../../pages/Error404";
-export const Router = () => {
-    return (
-        <BrowserRouter>
-            <Routes>
-                <Route path={`/login`} element={<Login />} />
-                <Route path={`*`} element={<Error404 />} />
-            </Routes>
-        </BrowserRouter>
-    );
-};
-```
-Nous avons ajouté au passage une page **Error404** sur ''*'' pour intercepter tout autre chemin.
-  * On remplace notre composant ''<Login />'' par ''<Router />''.
-```
-// src/App.jsx
-import { Router } from "./components/app/Router";
-export const App = () => {
-    return (
-        <Router />
-    );
-};
-```
-Et voilà notre application possède un router
-!
-### Routes publiques et privées
-Dans la plupart des applications, il est nécessaire de distinguer les routes publiques accessibles à tout utilisateur, des routes privées qui nécessitent une authentification.
-Comment fait-on ? Surprise ! On crée deux nouveaux composants: **PublicRoutes** et **PrivatesRoutes**.
-```
-import { Outlet, Navigate } from "react-router-dom";
-import { useSelector } from "react-redux";
-export const PublicRoutes = () => {
-    const isAuthentified = true;
-    return isAuthentified ? <Navigate to="/" : <Outlet />;
-};
-```
-```
-import { Outlet, Navigate } from "react-router-dom";
-import { useSelector } from "react-redux";
-export const PrivateRoutes = () => {
-    const isAuthentified = true;
-    return isAuthentified ? <Outlet /> : <Navigate to="/login" />;
-};
-```
-Dans ces deux composants, on pose une condition qui influe sur l'affichage. ''<Outlet />'' est l'équivalent du prop ''children'' des composants classiques (mais pour les routes), et représente le contenu de la balise. ''<Navigate />'' modifie le chemin.
-Pour résumer, si l'utilisateur est authentifié, **PublicRoutes** redirige vers un chemin privée (ici ''"/"''), sinon affiche son contenu (page **Login** par exemple).
-A l'inverse, PrivateRoutes affiche son contenu (page **Home** par exemple) si authentifié et redirige vers un chemin publique (ici ''"/login"'') dans le cas contraire.
-```
-import { Login } from "../../pages/Login";
-import { Home } from "../../pages/Home";
-import { Error404 } from "../../pages/Error404";
-import { PublicRoutes } from "../PublicRoutes";
-import { PrivateRoutes } from "../PrivateRoutes";
-export const Router = () => {
-    return (
-        <BrowserRouter>
-            <Routes>
-                <Route element={<PublicRoutes />}>
-                    <Route path={`/login`} element={<Login />} />
-                </Route>
-                <Route element={<PrivateRoutes />}>
-                    <Route path={`/`} element={<Home />} />
-                </Route>
-                <Route path={`*`} element={<Error404 />} />
-            </Routes>
-        </BrowserRouter>
-    );
-};
-```
-On a ajouté au passage une page **Home** histoire d'avoir une route privée. Vous pouvez essayer de définir ''isAuthentified'' à ''false'' et ''true'' pour tester.
-On ne traite ici que des routes publiques et privées mais on utiliserait le même système si l'on souhaité rajouter un autre type de route comme les routes d'admin par exemple.