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/29 10:11] – [Routage] paolofront:routage [2025/09/29 10:25] (Version actuelle) – [Routes publiques et privées] paolo
Ligne 7: Ligne 7:
 ### 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 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 47: 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";
Ligne 60: Ligne 66:
 ``` ```
 ``` ```
 +// 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";
Ligne 69: Ligne 77:
 }; };
 ``` ```
-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 l'utilisateur est authentifié, **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 99: Ligne 109:
 ``` ```
  
-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.+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.