Passage de paramètres et récupération de données d'URL en React Router

Lors du développement d'applications React, il est courant d'avoir besoin de passer des paramètres dans les URL et de les récupérer dans les composants pour afficher des informations spécifiques. Dans cette section, nous allons explorer le fonctionnement des paramètres dans les URL à l'aide de React Router et configurer le routeur pour gérer les pages "Produits" et "Produit" avec des données provenant d'un fichier JSON.

Fonctionnement des paramètres d'URL avec React Router

React Router nous permet de définir des paramètres dans les URL en utilisant des segments de chemin spécifiques. Ces segments de chemin sont définis en utilisant : suivi du nom du paramètre. Par exemple, si nous voulons passer un paramètre id dans l'URL, nous pouvons le définir comme suit : /produit/:id.

Lorsqu'une URL correspond à ce modèle de chemin avec un paramètre, React Router extrait la valeur du paramètre et la rend disponible dans le composant associé en utilisant l'objet match.params. Nous pouvons ensuite utiliser cette valeur pour effectuer des opérations spécifiques, telles que la recherche des détails d'un produit dans notre cas.

Configuration du routeur pour les pages "Produits" et "Produit"

Tout d'abord, nous allons configurer le routeur pour gérer les pages "Produits" et "Produit" en utilisant React Router. Nous aurons besoin des composants BrowserRouter, Routes, Route et Link de la bibliothèque react-router-dom. Assurez-vous d'installer cette bibliothèque en utilisant npm ou yarn avant de continuer.

Voici comment vous pouvez configurer le routeur :

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'
import Produits from './components/Produits'
import Produit from './components/Produit'
 
const Routeur = () => {
    return (
        <BrowserRouter>
            <nav>
                <ul>
                    <li>
                        <Link to='/'>Produits</Link>
                    </li>
                </ul>
            </nav>
            <Routes>
                <Route path='/produits' element={<Produits />} />
                <Route path='/produit/:id' element={<Produit />} />
            </Routes>
        </BrowserRouter>
    )
}
 
export default Routeur

Dans cet exemple, nous importons les composants Produits et Produit à partir de leurs fichiers respectifs. Ensuite, nous configurons les routes pour les pages "Produits" et "Produit" en utilisant les composants Route et Routes. Le chemin pour la page "Produit" est configuré avec un paramètre id en utilisant :id.

Création des composants "Produits" et "Produit" avec des données JSON

Maintenant, nous allons créer les composants "Produits" et "Produit" pour afficher les données des produits à partir du fichier JSON fourni. Nous allons créer les fichiers produits.jsx et produit.jsx dans le dossier src/components.

// ./src/data/produits.json
[
    {
        "id": 1,
        "nom": "Nom du produit",
        "description": "Description du produit",
        "prix": 29.99,
        "couleurs": ["rouge", "bleu", "vert"],
        "dimensions": {
            "hauteur": 10,
            "largeur": 15,
            "profondeur": 5
        },
        "caracteristiques": {
            "poids": 0.5,
            "materiau": "acier",
            "fabricant": "Nom du fabricant"
        },
        "commentaires": [
            {
                "auteur": "Utilisateur1",
                "texte": "Très bon produit !"
            },
            {
                "auteur": "Utilisateur2",
                "texte": "Le produit ne correspond pas à la description."
            }
        ]
    },
    {
        "id": 2,
        "nom": "Produit 2",
        "description": "Description du produit 2",
        "prix": 19.99,
        "couleurs": ["noir", "blanc"],
        "dimensions": {
            "hauteur": 8,
            "largeur": 12,
            "profondeur": 4
        },
        "caracteristiques": {
            "poids": 0.3,
            "materiau": "plastique",
            "fabricant": "Nom du fabricant 2"
        },
        "commentaires": [
            {
                "auteur": "Utilisateur3",
                "texte": "Très bon rapport qualité-prix."
            },
            {
                "auteur": "Utilisateur4",
                "texte": "Le produit est fragile."
            }
        ]
    },
    {
        "id": 3,
        "nom": "Produit 3",
        "description": "Description du produit 3",
        "prix": 39.99,
        "couleurs": ["jaune", "rose", "violet"],
        "dimensions": {
            "hauteur": 15,
            "largeur": 18,
            "profondeur": 6
        },
        "caracteristiques": {
            "poids": 0.8,
            "materiau": "bois",
            "fabricant": "Nom du fabricant 3"
        },
        "commentaires": [
            {
                "auteur": "Utilisateur5",
                "texte": "Superbe produit, je le recommande !"
            },
            {
                "auteur": "Utilisateur6",
                "texte": "La livraison a été lente."
            }
        ]
    },
    {
        "id": 4,
        "nom": "Produit 4",
        "description": "Description du produit 4",
        "prix": 49.99,
        "couleurs": ["gris", "marron"],
        "dimensions": {
            "hauteur": 12,
            "largeur": 16,
            "profondeur": 6
        },
        "caracteristiques": {
            "poids": 0.6,
            "materiau": "métal",
            "fabricant": "Nom du fabricant 4"
        },
        "commentaires": [
            {
                "auteur": "Utilisateur7",
                "texte": "Très satisfait de mon achat !"
            },
            {
                "auteur": "Utilisateur8",
                "texte": "Le produit est robuste et de bonne qualité."
            }
        ]
    }
]

// produits.jsx
import React from "react";
import produitsData from "./src/data/produits.json";
import { Link } from "react-router-dom";
 
const Produits = () => {
  return (
    <div>
      <h2>Liste des produits</h2>
 
      {produitsData.map((produit) => (
        <div key={produit.id}>
          <h3>
            <Link to={`/produit/${produit.id}`}>{produit.nom}</Link>
          </h3>
          <p>{produit.description}</p>
          <p>Prix : {produit.prix} €</p>
          <p>Couleurs disponibles : {produit.couleurs.join(", ")}</p>
          <p>
            Dimensions : {produit.dimensions.hauteur}cm x{" "}
            {produit.dimensions.largeur}cm x {produit.dimensions.profondeur}cm
          </p>
          <p>
            Caractéristiques : Poids {produit.caracteristiques.poids}kg,
            Matériau : {produit.caracteristiques.materiau}, Fabricant :{" "}
            {produit.caracteristiques.fabricant}
          </p>
          <h4>Commentaires :</h4>
          <ul>
            {produit.commentaires.map((commentaire, index) => (
              <li key={index}>
                <strong>{commentaire.auteur}</strong> : {commentaire.texte}
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
};
 
export default Produits;
 
 
// produit.jsx
import React from "react";
import { useParams } from "react-router-dom";
import produitsData from "./src/data/produits.json";
 
const Produit = () => {
  const { id } = useParams();
  const produit = produitsData.find((produit) => produit.id.toString() === id);
 
  if (!produit) {
    return <div>Produit introuvable</div>;
  }
 
  return (
    <div>
      <h2>{produit.nom}</h2>
      <p>{produit.description}</p>
      <p>Prix : {produit.prix} €</p>
      <p>Couleurs disponibles : {produit.couleurs.join(", ")}</p>
      <p>
        Dimensions : {produit.dimensions.hauteur}cm x{" "}
        {produit.dimensions.largeur}cm x {produit.dimensions.profondeur}cm
      </p>
      <p>
        Caractéristiques :
        <ul>
          <li>Poids : {produit.caracteristiques.poids} kg</li>
          <li>Matériau : {produit.caracteristiques.materiau}</li>
          <li>Fabricant : {produit.caracteristiques.fabricant}</li>
        </ul>
      </p>
      <h3>Commentaires :</h3>
      {produit.commentaires.map((commentaire, index) => (
        <div key={index}>
          <p>Auteur : {commentaire.auteur}</p>
          <p>Commentaire : {commentaire.texte}</p>
        </div>
      ))}
    </div>
  );
};
 
export default Produit;

Dans ces exemples, nous importons le fichier JSON des produits et utilisons les données pour afficher les informations dans les composants "Produits" et "Produit". Dans le composant "Produits", nous utilisons le composant Link de React Router pour créer des liens vers les pages "Produit" en utilisant le nom du produit comme paramètre d'URL. Dans le composant "Produit", nous utilisons l'objet match.params pour récupérer la valeur du paramètre id et rechercher les détails du produit correspondant dans le tableau de produits.

Conclusion

Dans cette section, nous avons exploré le passage de paramètres et la récupération de données d'URL dans React Router. Nous avons appris à configurer le routeur pour gérer les pages "Produits" et "Produit" avec des paramètres d'URL, et nous avons créé les composants correspondants pour afficher les informations spécifiques des produits à partir d'un fichier JSON. Cette fonctionnalité est utile lorsque vous avez besoin de créer des pages dynamiques avec des données spécifiques basées sur des paramètres d'URL.

Continuez à explorer les fonctionnalités avancées de React Router pour répondre aux besoins spécifiques de vos projets React et améliorer l'expérience utilisateur de vos applications.

Note : Dans les exemples fournis, nous avons utilisé un fichier JSON statique pour représenter les données des produits. Dans un projet réel, vous pouvez récupérer ces données à partir d'une API ou d'une base de données.

3.1 Routage en React avec React Router 4.1 Appels API en utilisant Fetch ou Axios