Configuration de l'acheminement dynamique dans une application React (2024)

Dans cette suite d'articles, nous approfondirons la mise en place de l'acheminement dynamique dans une application React, en mettant l'accent sur la création de routes dynamiques pour afficher des données spécifiques à chaque élément sur sa propre page. Si vous avez suivi la première partie, où nous avons expliqué comment récupérer des données d'une API et les afficher à l'aide de React Hooks et Axios, vous avez maintenant une page "Produits en vedette" qui présente les données récupérées.

Installation de React Router DOM

La première étape consiste à installer React Router DOM, qui nous permettra de gérer la navigation de manière dynamique. Exécutez la commande suivante dans votre terminal :

npm install react-router-dom

Ensuite, dans votre fichier App.js, importez Router, Route et Switch pour configurer les routes. Nous allons définir notre page d'accueil comme la page des "Produits en vedette" en lui attribuant le chemin "/".

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

// ...

<Router>
  <Switch>
    <Route path="/" component={FeaturedProducts} />
    {/* Autres routes dynamiques à ajouter ici */}
  </Switch>
</Router>

Configuration de la route dynamique

Pour mettre en place une route dynamique, nous allons créer un composant appelé "Product" qui affichera les détails d'un produit spécifique. Dans FeaturedProducts.js, ajoutons un lien à chaque carte de produit pour permettre la navigation vers la page individuelle du produit.

import { Link } from 'react-router-dom';

// ...

{products.map((product) => (
  <div key={product.id} className="card">
    {/* Autres détails du produit */}
    <Link to={`/product/${product.id}`}>Voir</Link>
  </div>
))}

Création du composant Product

Créez un fichier Product.js dans le dossier src pour contenir le composant qui affichera les détails du produit. Utilisez les hooks useState, useEffect et Axios pour récupérer les données du produit spécifique en fonction de l'ID passé dans l'URL.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const Product = ({ match }) => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchProduct = async () => {
      try {
        const response = await axios.get(`/api/products/${match.params.id}`);
        setData(response.data);
      } catch (error) {
        console.error('Erreur lors de la récupération des données du produit', error);
      }
    };

    fetchProduct();
  }, [match.params.id]);

  // Affichage des détails du produit
  return (
    <div>
      {/* Afficher les détails du produit ici */}
    </div>
  );
};

export default Product;

Retour à la page des Produits en vedette

Pour permettre une navigation fluide entre la page des "Produits en vedette" et les pages individuelles des produits, ajoutons un lien de retour à la page principale.

import { Link } from 'react-router-dom';

// ...

<Link to="/">RETOUR AUX PRODUITS EN VEDETTE</Link>

En suivant ces étapes, vous avez maintenant une configuration complète d'acheminement dynamique dans votre application React. Chaque produit sur la page des "Produits en vedette" est lié à sa propre page avec un ID unique dans l'URL. Cette approche améliorée de la navigation peut contribuer à une meilleure expérience utilisateur et à un positionnement plus élevé dans les résultats de recherche.