Routage

Documentation React-router-dom

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.

Voyons ce qu'on peut faire avec notre page Login.

On rajoute un dossier Router et son index.jsx dans components/app par exemple.

import { Login } from "../../pages/Login";
import { Error404 } from "../../pages/Error404";

export const Router = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route path={`/login`} element={<Login />} />
                <Route path={`*`} element={<Error404 />} />
            </Routes>
        </BrowserRouter>
    );        
};

On a ajouté au passage une page Error404 sur * pour intercepter tout autre chemin.

On remplace notre composant <Login /> par <Router />.

import { Router } from "./components/app/Router";

export const App = () => {
    return (
        <Router />
    );
};

Et voilà notre application possède un router !

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.

import { Outlet, Navigate } from "react-router-dom";

export const PublicRoutes = () => {
    const user = localStorage.getItem("user") ?? sessionStorage.getItem("user");
    
    return user ? <Navigate to="/" : <Outlet />;        
};

import { Outlet, Navigate } from "react-router-dom";

export const PrivateRoutes = () => {
    const user = localStorage.getItem("user") ?? sessionStorage.getItem("user");
    
    return user ? <Outlet /> : <Navigate to="/login" />;        
};

Dans ces deux composants, on pose une condition qui influe sur l'affichage. <Outlet /> est l'équivalent du prop children pour les composants classiques et représente le contenu de la balise. <Navigate /> modifie le chemin.

Pour résumer, si il y a un utilisateur authentifié (stocké en local ou session), 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.

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>
    );        
};

On a ajouté au passage une page Home histoire d'avoir une route privée.

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.