I exemplet med komponenten ProductsPage integreras useSearchParams för att hantera frågeparametrar.

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

Här är en genomgång av koden:

1. Nödvändiga beroenden importeras: useState, useEffect och useSearchParams från React Router;
2. Tillståndet initieras i komponenten med hjälp av useState. Tillståndet companies innehåller data som ska visas, och funktionen setCompanies används för att uppdatera det;
3. En funktion updateCompanies skapas för att filtrera data baserat på frågeparametrar. Funktionen tar de aktuella frågeparametrarna som en instans av URLSearchParams och använder dem för att filtrera data. I detta fall filtreras det efter parametern "name";
4. Hooken useEffect används för att köra funktionen updateCompanies när komponenten monteras och varje gång frågeparametrarna ändras. Detta säkerställer att visad data hålls synkroniserad med URL:en;
5. Funktionen handleChange uppdaterar frågeparametern "name" som svar på användarens inmatning. När inmatningsfältet ändras anropas setSearchParams med det nya parametervärdet;
6. I komponentens return-sats renderas ett inmatningsfält för användarens inmatning och en lista över företag baserat på den filtrerade datan.

Denna kod visar hur useSearchParams och React Router kan integreras för att skapa en dynamisk webbapplikation som reagerar på förändringar i frågeparametrar.