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

```js
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 répartition du code :
1. Nous importons les dépendances nécessaires : `useState`, `useEffect` et `useSearchParams` de React Router ;
2. Nous initialisons l'état à l'intérieur du composant en utilisant `useState`. L'état `companies` contient les données à afficher, et nous utilisons la fonction `setCompanies` pour le mettre à jour ;
3. Nous créons une fonction `updateCompanies` pour filtrer les données en fonction des paramètres de requête. La fonction prend les paramètres de requête actuels en tant qu'instance `URLSearchParams` et les utilise pour filtrer les `data`. Dans ce cas, elle filtre par le paramètre "name" ;
4. Nous utilisons le hook `useEffect` pour exécuter la fonction `updateCompanies` lorsque le composant est monté et chaque fois que les paramètres de requête changent. Cela garantit que les données affichées sont synchronisées avec l'URL ;
5. La fonction `handleChange` met à jour le paramètre de requête "name" en réponse à l'entrée de l'utilisateur. Lorsque le champ de saisie change, il appelle `setSearchParams` avec la nouvelle valeur du paramètre ;
6. Dans l'instruction de retour du composant, nous rendons un champ de saisie pour l'entrée de l'utilisateur et une liste de sociétés basée sur les données filtrées.

Ce code démontre comment intégrer `useSearchParams` et React Router pour créer une application web dynamique qui répond aux changements des paramètres de requête.

Plongez dans le monde du routage au sein des applications React et découvrez comment React Router simplifie la gestion de la navigation, de l'état des URL et du rendu dynamique des composants, tout en réponse à l'URL actuelle.

Apprenez les bases théoriques de concepts tels que l'URL, le domaine, le protocole, les paramètres de requête, et plus encore. Comprenez l'importance du routage dans les applications web et pourquoi nous avons besoin de la bibliothèque React Router.

Découvrez comment créer une application React complète à partir de zéro, avec la capacité d'afficher du contenu qui s'adapte en fonction de l'URL en utilisant la fonctionnalité de React Router.

Explorez l'utilisation des chaînes de requête pour partager et gérer l'état de l'application via les URL, travaillez avec différents types de données dans les paramètres de requête, et utilisez React Router pour la navigation et les effets basés sur les changements d'URL.

React Router

Intégration du Hook useSearchParams