React Router¶

Permettre de passer d’une page à l’autre dans votre application React.

Pour l'installer dans votre projet :

npm i react-router
npm i @types/react-router --save-dev

Exemple de SPA avec Router¶

import { BrowserRouter, Routes, Route, Outlet, useParams } from 'react-router';

import './App.css';

function Modele() {
  return (
    <div>
      <a href="/">Page principale</a>&nbsp;
      <a href="/dadams">Douglas Adams</a>&nbsp;
      <a href="/oscard">Orson Scott Card</a>
      <br />
      <Outlet />
    </div>
  );
}
function PagePrincipale() {
  return <h1>Page principale</h1>;
}

function DouglasAdams() {
  return (
    <>
      <h1>Page de Douglas Adams</h1>&nbsp;
      <a href="/livre/1">Livre 1</a>&nbsp;
      <a href="/livre/2">Livre 2</a>&nbsp;
    </>
  );
}

function OrsonScottCard() {
  return <h1>Page de Orson Scott Card</h1>;
}

function Livre() {
  const { id } = useParams();
  return <h1>Livre #{id}</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Modele />}>
          <Route index element={<PagePrincipale />} />
          <Route path="dadams" element={<DouglasAdams />} />
          <Route path="oscard" element={<OrsonScottCard />} />
          <Route path="livre/:id" element={<Livre />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Différents éléments du projet monrouteur¶

BrowserRouter¶

Un <BrowserRouter> stocke l'emplacement actuel dans la barre d'adresse du navigateur en utilisant des URL propres et navigue en utilisant la pile d'historique intégrée du navigateur.

function App() {
  return (
    <BrowserRouter>
      // Le reste de l'application React
    </BrowserRouter>
  );
}

Routes¶

L'élément <Routes> (au pluriel) indique l'ensemble des routes qui seront disponibles dans l'application. Doit contenir au moins un élément <Route> (au singulier).

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Modele />}/>
      </Routes>
    </BrowserRouter>
  );
}

Route¶

L'élément <Route> (au singulier) définit une page de l'application à afficher selon son URL.

Par exemple :

     <Route path="/dadams" element={<DouglasAdams />} />

Cette route indique que http://serveur/dadams pointe sur la composante DouglasAdams.

Routes imbriquées¶

L'élément <Route> (au singulier) peut contenir des routes enfants. Comme ceci :

     <Route path="/" element={<Modele />}>
          <Route index element={<PagePrincipale />} />
          <Route path="dadams" element={<DouglasAdams />} />
          <Route path="oscard" element={<OrsonScottCard />} />
          <Route path="livre/:id" element={<Livre />} />
        </Route>

Plusieurs choses importantes ici :

• La route "/" est la route parent des autres. Lorsqu'un élément est mentionné dans la route parent, l'élément est généré avant celui de la route enfant. Il faut par contre indiquer dans l'élément parent à quel endroit faut-il générer l'élément enfant (avec l'élément <Outlet>) :

  app.tsx

      function Modele() {
      return (
          <div>
          <a href="/">Page principale</a>&nbsp;
          <a href="/dadams">Douglas Adams</a>&nbsp;
          <a href="/oscard">Orson Scott Card</a>
          <br />
          <Outlet />
          </div>
      );
      }
  

• Le mot clé index indique l'élément qui sera généré lorsque l'utilisateur navigue à l'URL du parent.

Routes dynamiques¶

On peut placer un paramètre dans une route qui peut être lu par l'élément généré.

Dans la route, on peut avoir le paramètre :id :

<Route path="livre/:id" element={<Livre />} />

Dans l'élément, on accède au paramètre avec la fonction useParams() :

    function Livre() {
        const { id } = useParams();
        return <h1>Livre #{id}</h1>;
    }

HashRouter¶

Dans certaines situations, le BrowserRouter cause des problèmes. Par exemple, déployer un site avec BrowserRouter sans pouvoir changer les directives du serveur Web, rend inutilisable le site car BrowserRouter essaie de lire les pages du site qui n'existent pas au niveau du serveur Web. (Tout se passe dans index.html).

Le remède est l'utilisation de HashRouter, qui utilise un # dans l'url, ce qui force le navigateur à rester dans le même index.html.

import { HashRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/" element={<Modele />}>
          <Route index element={<PagePrincipale />} />
          <Route path="dadams" element={<DouglasAdams />} />
        </Route>
      </Routes>
    </HashRouter>
  );
}

Dans l'exemple ci-haut, l'url de la page de l'auteur serait : http://localhost:3000/#/dadams pour le HashRouter.