Dans le composant d'exemple ProductsPage, nous intégrons useSearchParams pour gérer les paramètres de requête.

import React, { useState, useEffect } from "react";
import { useSearchParams } from "react-router-dom";

const ProductsPage = ({ data }) => {
  const [companies, setCompanies] = useState(data);
  const [searchParams, setSearchParams] = useSearchParams();

  // Function to update the displayed `companies` based on query parameters
  const updateCompanies = (params) => {
    const filteredCompanies = data.filter((item) => {
      const { companyName } = item;
      if (params.get("name")) {
        return companyName.toLowerCase().includes(params.get("name"));
      }
      return true;
    });
    setCompanies(filteredCompanies);
  };

  useEffect(() => {
    // When the component mounts or query parameters change, update the displayed `companies`
    updateCompanies(searchParams);
  }, [searchParams, data]);

  // Function to update query parameters based on user input
  const handleChange = (e) => {
    const newName = e.target.value;
    setSearchParams({ name: newName });
  };

  return (
    <>
      <input
        type="text"
        value={searchParams.get("name") || ""}
        onChange={handleChange}
      />
      <ul className="companyList">
        {companies.map(({ id, companyName, companyDescription }) => (
          <li key={id}>
            <h2>{companyName}</h2>
            <p>{companyDescription}</p>
          </li>
        ))}
      </ul>
    </>
  );
};

Voici une explication détaillée du code :

1. Importation des dépendances nécessaires : useState, useEffect et useSearchParams depuis React Router ;
2. Initialisation de l’état à l’intérieur du composant avec useState. L’état companies contient les données à afficher, et la fonction setCompanies permet de les mettre à jour ;
3. Création d’une fonction updateCompanies pour filtrer les données selon les paramètres de requête. Cette fonction prend les paramètres de requête actuels sous forme d’instance URLSearchParams et les utilise pour filtrer les data. Dans cet exemple, le filtrage s’effectue sur le paramètre "name" ;
4. Utilisation du hook useEffect pour exécuter la fonction updateCompanies lors du montage du composant et à chaque modification des paramètres de requête. Cela garantit la synchronisation des données affichées avec l’URL ;
5. La fonction handleChange met à jour le paramètre de requête "name" en réponse à la saisie utilisateur. Lorsque le champ de saisie change, elle appelle setSearchParams avec la nouvelle valeur du paramètre ;
6. Dans le bloc de retour du composant, affichage d’un champ de saisie pour l’utilisateur et d’une liste d’entreprises basée sur les données filtrées.

Ce code illustre l’intégration de useSearchParams et React Router pour créer une application web dynamique réagissant aux modifications des paramètres de requête.