Différences

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

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
front:routage [2025/09/25 13:42] – paolofront:routage [2025/09/29 10:25] (Version actuelle) – [Routes publiques et privées] paolo
Ligne 3: Ligne 3:
 Documentation [React-router-dom](https://reactrouter.com/home) 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. +**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 ### Mettre en place un router
  
-Voyons ce qu'on peut faire avec notre page **Login**.+Voyons ce que nous pouvons faire avec notre page **Login**:
  
-On rajoute un dossier ''Router'' et son ''index.jsx'' dans ''components/app'' par exemple.+  * Nous rajoutons un dossier ''Router'' et son ''index.jsx'' par exemple.
  
 ``` ```
-import { Login } from "../pages/Login"; +// src/components/app/Router/index.jsx 
-import { Error404 } from "../pages/Error404";+ 
 +import { Login } from "../../pages/Login"; 
 +import { Error404 } from "../../pages/Error404";
  
 export const Router = () => { export const Router = () => {
Ligne 27: Ligne 29:
 ``` ```
  
-On a ajouté au passage une page **Error404** sur ''*'' pour intercepter tout autre chemin.+Nous avons complété notre **Router** en rajoutant une page **Error404** sur ''*'' pour intercepter tout autre chemin.
  
-On remplace notre composant ''<Login />'' par ''<Router />''.+  * Nous remplaçons notre composant ''<Login />'' par ''<Router />''.
  
 ``` ```
 +// src/App.jsx
 +
 import { Router } from "./components/app/Router"; import { Router } from "./components/app/Router";
  
Ligne 41: Ligne 45:
 ``` ```
  
-Et voilà notre application possède un router ! +Et voilà notre application possède un router  
 +!
 ### Routes publiques et privées ### 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. 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**.+Comment fait-on ? Surprise ! On crée deux nouveaux composants: ''PublicRoutes'' et ''PrivatesRoutes''.
  
 ``` ```
 +// src/components/app/Router/PublicRoutes/index.jsx
 +
 import { Outlet, Navigate } from "react-router-dom"; import { Outlet, Navigate } from "react-router-dom";
 +import { useSelector } from "react-redux";
  
 export const PublicRoutes = () => { export const PublicRoutes = () => {
-    const user = localStorage.getItem("user") ?? sessionStorage.getItem("user");+    const isAuthentified = true; 
 +     
 +    return isAuthentified ? <Navigate to="/" : <Outlet />;         
 +}; 
 +``` 
 +``` 
 +// src/components/app/Router/PrivateRoutes/index.jsx 
 + 
 +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, nous posons 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. 
 +``` 
 +// src/components/app/Router/index.jsx 
 + 
 +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 (     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>
     );             );        
 }; };
 +```
 +
 +Nous avons complété notre **Router** en rajoutant une page **Home**.
 +
 +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.