Différences

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

--- front:routage [2025/09/25 14:10] – 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 qu'on peut faire avec notre page **Login**.
-On rajoute un dossier ''Router'' et son ''index.jsx'' dans ''components/app'' par exemple.
-```
-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>
-    );
-};
-```
-On a ajouté au passage une page **Error404** sur ''*'' pour intercepter tout autre chemin.
-On remplace notre composant ''<Login />'' par ''<Router />''.
-```
-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";
-export const PublicRoutes = () => {
-    const user = localStorage.getItem("user") ?? sessionStorage.getItem("user");
-    return user ? <Navigate to="/" : <Outlet />;
-};
-```
-```
-import { Outlet, Navigate } from "react-router-dom";
-export const PrivateRoutes = () => {
-    const user = localStorage.getItem("user") ?? sessionStorage.getItem("user");
-    return user ? <Outlet /> : <Navigate to="/login" />;
-};
-```
-Dans ces deux composants, on pose une condition qui influe sur l'affichage. ''<Outlet />'' est l'équivalent du prop ''children'' pour les composants classiques et représente le contenu de la balise. ''<Navigate />'' modifie le chemin.
-Pour résumer, si il y a un utilisateur authentifié (stocké en local ou session), **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.