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:20] – 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 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
  
-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 "../+// src/components/app/Router/index.jsx 
 + 
 +import { Login } from "../../pages/Login"; 
 +import { Error404 } from "../../pages/Error404"; 
 export const Router = () => { export const Router = () => {
     return (     return (
Ligne 23: Ligne 29:
 ``` ```
  
-On a ajouté au passage une +Nous avons complété notre **Router** en rajoutant une page **Error404** sur ''*'' pour intercepter tout autre chemin. 
 + 
 +  * Nous remplaçons notre composant ''<Login />'' par ''<Router />''. 
 + 
 +``` 
 +// src/App.jsx 
 + 
 +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''. 
 + 
 +``` 
 +// src/components/app/Router/PublicRoutes/index.jsx 
 + 
 +import { Outlet, Navigate } from "react-router-dom"; 
 +import { useSelector } from "react-redux"; 
 + 
 +export const PublicRoutes = () => { 
 +    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 ( 
 +        <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.