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 du code :

1. Importation des dépendances nécessaires : useState, useEffect et useSearchParams depuis React Router ;
2. Initialisation de l’état dans le composant à l’aide de 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 en fonction des 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 ce cas, le filtrage s’effectue selon 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 que les données affichées restent synchronisées avec l’URL ;
5. La fonction handleChange met à jour le paramètre de requête "name" en réponse à la saisie de l’utilisateur. Lorsque le champ de saisie change, elle appelle setSearchParams avec la nouvelle valeur du paramètre ;
6. Dans l’instruction 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.