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 15:13] – [Routes publiques et privées] 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.
  
 ``` ```
 +// src/components/app/Router/index.jsx
 +
 import { Login } from "../../pages/Login"; import { Login } from "../../pages/Login";
 import { Error404 } from "../../pages/Error404"; import { Error404 } from "../../pages/Error404";
Ligne 26: 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 46: Ligne 51:
 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"; import { useSelector } from "react-redux";
  
 export const PublicRoutes = () => { export const PublicRoutes = () => {
-    const session = useSelector(state => state.session.data);+    const isAuthentified = true;
          
-    return session ? <Navigate to="/" : <Outlet />;        +    return isAuthentified ? <Navigate to="/" : <Outlet />;        
 }; };
 ``` ```
 ``` ```
 +// src/components/app/Router/PrivateRoutes/index.jsx
 +
 import { Outlet, Navigate } from "react-router-dom"; import { Outlet, Navigate } from "react-router-dom";
 import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
  
 export const PrivateRoutes = () => { export const PrivateRoutes = () => {
-    const session = useSelector(state => state.session.data);+    const isAuthentified = true;
          
-    return session ? <Outlet /> : <Navigate to="/login" />;        +    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.+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 il y a un utilisateur stocké en local ou session via redux (on aborde cette partie dans le prochain point, soyez patient), **PublicRoutes** redirige vers un chemin privée (ici ''"/"''), sinon affiche son contenu (page **Login** par exemple).+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. 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 { Login } from "../../pages/Login";
 import { Home } from "../../pages/Home"; import { Home } from "../../pages/Home";
Ligne 98: Ligne 109:
 ``` ```
  
-On a ajouté au passage une page **Home** histoire d'avoir une route privée.+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. 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.