Nell'esempio del componente ProductsPage, viene integrato useSearchParams per gestire i parametri di query.

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>
    </>
  );
};

Ecco una panoramica del codice:

1. Importazione delle dipendenze necessarie: useState, useEffect e useSearchParams da React Router;
2. Inizializzazione dello stato all'interno del componente tramite useState. Lo stato companies contiene i dati da visualizzare e la funzione setCompanies viene utilizzata per aggiornarli;
3. Creazione della funzione updateCompanies per filtrare i dati in base ai parametri di query. La funzione riceve i parametri di query correnti come istanza di URLSearchParams e li utilizza per filtrare i data. In questo caso, il filtro avviene tramite il parametro "name";
4. Utilizzo dell'hook useEffect per eseguire la funzione updateCompanies al montaggio del componente e ogni volta che i parametri di query cambiano. Questo garantisce che i dati visualizzati siano sempre sincronizzati con l'URL;
5. La funzione handleChange aggiorna il parametro di query "name" in risposta all'input dell'utente. Quando il campo di input cambia, viene chiamata setSearchParams con il nuovo valore del parametro;
6. Nella dichiarazione di ritorno del componente, viene renderizzato un campo di input per l'inserimento dell'utente e un elenco di aziende basato sui dati filtrati.

Questo codice dimostra come integrare useSearchParams e React Router per creare un'applicazione web dinamica che risponde ai cambiamenti dei parametri di query.