Im Beispielkomponenten ProductsPage wird useSearchParams integriert, um Abfrageparameter zu verwalten.

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 ist eine Übersicht des Codes:

1. Import der erforderlichen Abhängigkeiten: useState, useEffect und useSearchParams von React Router;
2. Initialisierung des Zustands innerhalb der Komponente mit useState. Der Zustand companies enthält die anzuzeigenden Daten und wird mit der Funktion setCompanies aktualisiert;
3. Erstellung einer Funktion updateCompanies, um die Daten basierend auf den Query-Parametern zu filtern. Die Funktion erhält die aktuellen Query-Parameter als Instanz von URLSearchParams und verwendet diese, um die data zu filtern. In diesem Fall erfolgt die Filterung nach dem Parameter "name";
4. Verwendung des useEffect-Hooks, um die Funktion updateCompanies beim Mounten der Komponente und bei jeder Änderung der Query-Parameter auszuführen. Dadurch wird sichergestellt, dass die angezeigten Daten stets mit der URL synchronisiert sind;
5. Die Funktion handleChange aktualisiert den Query-Parameter "name" als Reaktion auf Benutzereingaben. Bei Änderungen im Eingabefeld wird setSearchParams mit dem neuen Parameterwert aufgerufen;
6. Im Rückgabewert der Komponente wird ein Eingabefeld für Benutzereingaben sowie eine Liste der Unternehmen basierend auf den gefilterten Daten gerendert.

Dieser Code zeigt, wie useSearchParams und React Router integriert werden können, um eine dynamische Webanwendung zu erstellen, die auf Änderungen der Query-Parameter reagiert.