React-Router-DOM

Liens_Web:

React-routeur-dom est une Librairie qui permet de faire du routage entre les pages du projet ou de l’application sans avoir à recharger le DOM.

Cette librairie est utilisée depuis le composoant racine, génrallement le composant « App.js ».

Avertissement

A chaque changement de composant les données seront effacées. Il est donc important de percisté les données avec le localstorage ou une base de donnés. Dans le cas contraite toutes les données seront perdu puisque le composant sera chargé à son état initial.

Cookbook : React-Router-DOM v6

Liens_Web:

Le composant <Switch/> n’est plus utilisé dans la v6. Il est remplacé par le composant <Routes/>

  1. Le composant <BrowserRouter></BrowserRouter> doit être placé au plus haut dans l’arborescence, générallement dans « index.js ».

    // Document : index.js

// Import de librairie
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';

// Import des pages et des composant
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
      <App />
  </BrowserRouter>
);

  2. Il faut ensuite définir les différente routes dans le composant <App /> à l’aide des composants <Routes></Routes> et <Route>.

    La nécéssité de créer des routes et liée au faite d’avoir plusieurs pages chacune dépendantes d’une URL spécifique. Il peut cependant y avoir des composant statiques commun entre toutes les pages. C’est le cas des barres de navigation et des footers. Ces éléments doivent être placés en dehors du composant <Routes></Routes>.

     // Document : App.js

 // Import de librairie Tiers
 import React from 'react';
 import { Routes, Route } from 'react-router-dom';

 // Import des pages et des composant
 import Navigation from './components/Navigation/Navigation';
 import Home from './pages/Home/Home';
 import Entree from './pages/Entree/Entree';
 import Resume from './pages/Resume/Resume';

 // Import de CSS
 import './App.css';

 const App = () => {
 return (
     <>
     <Navigation />
     <Routes>
         <Route path="/Entree" element={<Entree />} />
         <Route path="/Resume" element={<Resume />} />
         {/* Toutes les entrée de l'URL différente des routes précédente sont redirigé vers 'Home' */}
         <Route exact path="/" element={<Home />} />
         <Route path="*" element={<Home />} />
     </Routes>
     </>
   )
 }

export default App;