Installation de React Router dans une application Redux

Lors des leçons précédentes, nous avons installé les principaux outils pour travailler avec Redux. Il arrive souvent qu'une application ait besoin d'un routeur pour naviguer entre ses pages web et notre application ne fera pas exception. Pour cela, nous installerons la bibliothèque React Router.

Ouvrons notre projet et tapons dans le terminal la commande suivante :

terminalnpm install react-router-dom

En anticipant un peu, je dirai que notre application Redux est traditionnellement dédiée aux produits, dont les informations sont publiées par certains vendeurs. C'est pourquoi nous allons maintenant un peu refondre le composant principal App, et ajouter également à l'application des fonctionnalités pour assurer le routage.

Pour commencer, allons dans le dossier src, puis dans app et créons ici le fichier root.jsx. Ce sera la racine de notre site : à gauche nous aurons un menu, et à droite - le contenu (pour l'instant, nous n'avons ici qu'un titre) :

app/root.jsxfunction Root() {
  return (
    <div id="main">
      <div id="menu">
        <nav>
          <a>Products</a>
          <a>Sellers</a>
        </nav>
      </div>
      <div id="main_page">
        <h2>This is my first Redux app!</h2>
        <hr></hr>
      </div>
    </div>
  )
}

export default Root

Et nous allons modifier le composant App. Pour commencer, supprimons complètement son contenu. Ensuite, importons deux fonctions pour le routeur et notre composant racine Root :

App.jsximport { createBrowserRouter, RouterProvider } from 'react-router-dom'
import Root from './app/root'

Ci-dessous, après l'import, créons un routeur, et définissons la première route, en lui passant notre Root comme élément à afficher et, par conséquent, en définissant le chemin sur '/'. À l'avenir, dans App, nous ajouterons d'autres routes nécessaires :

App.jsxconst router = createBrowserRouter([{ path: '/', element: <Root /> }])

Ci-dessous, écrivons le code de la fonction App :

App.jsxfunction App() {
  return <RouterProvider router={router} />
}

export default App

Terminé. Lançons l'application. Dans la section suivante, nous implémenterons les composants pour faire fonctionner l'application Redux.

Pour finir, ajoutons un peu de style, en écrivant pour cela des règles dans index.css :

index.cssbody {
  font-size: 24px;
  line-height: 1.5;
}

nav {
  display: flex;
  flex-direction: column;
}

ul {
  list-style: none;
  padding: 0;
}

h1, h2, h3 {
  margin: 0;
}

a {
  text-decoration: none;
  color: blue;
  cursor: pointer;
}

#main {
  display: flex;
  margin: 20px;
}

#menu {
  margin-right: 50px;
  padding-top: 50px;
  padding-right: 50px;
  border-right: 2px solid lightgray;
  font-weight: bold;
}