I eksemplet med komponenten ProductsPage integreres useSearchParams til håndtering af forespørgselsparametre.

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

Her er en gennemgang af koden:

1. Vi importerer de nødvendige afhængigheder: useState, useEffect og useSearchParams fra React Router;
2. Vi initialiserer tilstanden inde i komponenten ved hjælp af useState. Tilstanden companies indeholder de data, der skal vises, og vi bruger funktionen setCompanies til at opdatere den;
3. Vi opretter en funktion updateCompanies til at filtrere dataene baseret på forespørgselsparametre. Funktionen tager de aktuelle forespørgselsparametre som en URLSearchParams-instans og bruger dem til at filtrere data. I dette tilfælde filtreres der efter "name"-parameteren;
4. Vi bruger hooken useEffect til at køre funktionen updateCompanies, når komponenten monteres, og hver gang forespørgselsparametrene ændres. Dette sikrer, at de viste data holdes synkroniseret med URL'en;
5. Funktionen handleChange opdaterer "name"-forespørgselsparameteren som reaktion på brugerinput. Når inputfeltet ændres, kaldes setSearchParams med den nye parameterværdi;
6. I komponentens return-udsagn gengiver vi et inputfelt til brugerinput og en liste over virksomheder baseret på de filtrerede data.

Denne kode demonstrerer, hvordan man integrerer useSearchParams og React Router for at skabe en dynamisk webapplikation, der reagerer på ændringer i forespørgselsparametre.