# Routage

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 sans recharger l'application (**Single Page Application**) selon l'url ainsi que des hooks facilitant son utilisation
.
### Mettre en place un router

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 = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route path={`/login`} element={<Login />} />
                <Route path={`*`} element={<Error404 />} />
            </Routes>
        </BrowserRouter>
    );        
};
```

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.