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:13] – [Mettre en place un router] paolofront:routage [2025/09/29 10:25] (Version actuelle) – [Routes publiques et privées] paolo
Ligne 29: Ligne 29:
 ``` ```
  
-Nous avons 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 />''.
  
 ``` ```
Ligne 51: 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 64: 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 73: 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 103: 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.