In het voorbeeldcomponent ProductsPage wordt useSearchParams geïntegreerd om queryparameters te beheren.

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

Hier volgt een overzicht van de code:

1. We importeren de benodigde afhankelijkheden: useState, useEffect en useSearchParams van React Router;
2. We initialiseren de state binnen de component met useState. De companies-state bevat de gegevens die getoond worden, en we gebruiken de functie setCompanies om deze bij te werken;
3. We maken een functie updateCompanies om de gegevens te filteren op basis van queryparameters. De functie ontvangt de huidige queryparameters als een URLSearchParams-instantie en gebruikt deze om de data te filteren. In dit geval wordt er gefilterd op de parameter "name";
4. We gebruiken de useEffect-hook om de functie updateCompanies uit te voeren wanneer de component wordt geladen en telkens wanneer de queryparameters wijzigen. Dit zorgt ervoor dat de weergegeven gegevens synchroon blijven met de URL;
5. De functie handleChange werkt de queryparameter "name" bij als reactie op gebruikersinvoer. Wanneer het invoerveld verandert, roept deze setSearchParams aan met de nieuwe parameterwaarde;
6. In de return statement van de component renderen we een invoerveld voor gebruikersinvoer en een lijst van bedrijven op basis van de gefilterde gegevens.

Deze code toont hoe useSearchParams en React Router geïntegreerd kunnen worden om een dynamische webapplicatie te maken die reageert op wijzigingen in queryparameters.