Tutoriel de navigation React | React Router | Routage côté client

Introduction

Dans ce projet, vous allez apprendre à implémenter des fonctionnalités de navigation dans une application React. Vous allez créer une application simple avec une barre de navigation et des pages que vous pouvez naviguer à l'aide de liens.

👀 Aperçu

aperçu du projet

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment configurer le projet et installer les dépendances
Comment ajouter des routes et des correspondants de routes pour activer la navigation des menus dans la barre de navigation
Comment ajouter la navigation de la liste de cartes vers les cartes individuelles

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Utiliser React Router pour gérer la navigation côté client
Créer des liens et naviguer entre différentes pages dans une application React
Passer des données entre les composants à l'aide de l'objet state dans React Router

Configurer le projet

Dans cette étape, vous allez apprendre à configurer le projet et à installer les dépendances nécessaires.

Ouvrez votre éditeur de code et accédez au répertoire du projet.

├── public
├── src
│   ├── App.css
│   ├── App.js
│   ├── components
│   │   ├── Card.js
│   │   ├── Cards.js
│   │   └── Home.js
│   ├── index.css
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── package-lock.json
└── package.json

Ensuite, téléchargez les dépendances à l'aide de la commande npm install dans le terminal, attendez que les dépendances aient fini de se télécharger puis lancez le projet à l'aide de la commande npm start.

Une fois le projet démarré avec succès, cliquez sur "Web 8080" pour le prévisualiser dans votre navigateur.

Ajouter des routes et des correspondants de routes

Dans cette étape, vous allez apprendre à ajouter des routes et des correspondants de routes pour activer la navigation des menus dans la barre de navigation.

Ouvrez le fichier src/index.js et importez les modules nécessaires :

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";

Entourez le composant App avec le composant BrowserRouter :

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Ouvrez le fichier src/App.js et importez les composants et modules nécessaires :

import React from "react";
import { Route, Switch, Link } from "react-router-dom";
import { Home } from "./components/Home";
import { Cards } from "./components/Cards";
import { Card } from "./components/Card";
import "./App.css";

Ajoutez le menu de navigation et le composant Switch pour gérer les différentes routes :

const App = () => {
  return (
    <div className="app">
      <header>
        <Link to="/" className="menu menu-1">
          page d'accueil
        </Link>
        <Link to="/cards" className="menu menu-2">
          page des cartes
        </Link>
      </header>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/cards" exact component={Cards} />
        <Route path="/cards/:id" component={Card} />
      </Switch>
    </div>
  );
};

Le composant Switch garantit qu'une seule route est affichée à la fois, et les composants Route définissent les différentes routes et les composants correspondants à afficher.

Dans cette étape, vous allez apprendre à ajouter du code pour passer de la page de la liste de cartes à la page de la carte individuelle.

Ouvrez le fichier src/components/Cards.js et importez les modules nécessaires :
```
import React from "react";
import { Link } from "react-router-dom";
```

Ajoutez le code pour afficher la liste de cartes avec des liens vers les pages des cartes individuelles :

export const Cards = () => {
  const colors = ["#26547c", "#ef476f", "#ffd166", "#06d6a0"];

  return (
    <div className="page cards">
      {colors.map((c, idx) => {
        return (
          <Link
            key={idx}
            to={{
              pathname: `/cards/${idx + 1}`,
              state: { bgColor: c }
            }}
          >
            <div
              className={`card card-${idx + 1}`}
              style={{ backgroundColor: c }}
            >
              Carte {idx + 1}
            </div>
          </Link>
        );
      })}
    </div>
  );
};

Le composant Link est utilisé pour créer des liens vers les pages des cartes individuelles, et la propriété to est utilisée pour spécifier le chemin et l'état à passer au composant Card.

Ouvrez le fichier src/components/Card.js et importez les modules nécessaires :

import React from "react";
import { useParams, useLocation } from "react-router-dom";

Ajoutez le code pour afficher la page de la carte individuelle :

export const Card = () => {
  const { id } = useParams();
  const { state } = useLocation();

  return (
    <div
      className="page card-page"
      style={{ backgroundColor: state.bgColor }}
    >
      <p>Carte {id}</p>
    </div>
  );
};

Le hook useParams est utilisé pour récupérer le paramètre id de l'URL, et le hook useLocation est utilisé pour récupérer l'objet state qui a été passé à partir du composant Cards.

Maintenant, vous avez terminé le projet. Le résultat final est montré dans l'écran d'après. Cliquez sur la page des cartes pour accéder à la page de la liste de cartes, et cliquez sur chaque carte pour accéder à la page de la carte individuelle.

Navigation entre la liste de cartes et les cartes individuelles

Résumé

Félicitations ! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires sur LabEx pour améliorer vos compétences.

Implémentation des fonctionnalités de navigation React