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:16] – 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**: 
 + 
 +  * Nous rajoutons un dossier ''Router'' et son ''index.jsx'' par exemple.
  
 ``` ```
 +// src/components/app/Router/index.jsx
 +
 +import { Login } from "../../pages/Login";
 +import { Error404 } from "../../pages/Error404";
 +
 export const Router = () => { export const Router = () => {
     return (     return (
         <BrowserRouter>         <BrowserRouter>
             <Routes>             <Routes>
-                <Route path={`/login`} element={<LoginPage />} /> +                <Route path={`/login`} element={<Login />} /> 
-                <Route path={`*`} element={<Error404Page />} />+                <Route path={`*`} element={<Error404 />} />
             </Routes>             </Routes>
         </BrowserRouter>         </BrowserRouter>
Ligne 19: Ligne 28:
 }; };
 ``` ```
 +
 +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.