Im Beispielkomponente `ProductsPage` integrieren wir `useSearchParams`, um Abfrageparameter zu verwalten.

```js
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 Aufschlüsselung des Codes:
1. Wir importieren die notwendigen Abhängigkeiten: `useState`, `useEffect` und `useSearchParams` von React Router;
2. Wir initialisieren den Zustand innerhalb der Komponente mit `useState`. Der `companies`-Zustand hält die anzuzeigenden Daten, und wir verwenden die Funktion `setCompanies`, um ihn zu aktualisieren;
3. Wir erstellen eine Funktion `updateCompanies`, um die Daten basierend auf Abfrageparametern zu filtern. Die Funktion nimmt die aktuellen Abfrageparameter als `URLSearchParams`-Instanz und verwendet sie, um die `data` zu filtern. In diesem Fall wird nach dem "name"-Parameter gefiltert;
4. Wir verwenden den `useEffect`-Hook, um die Funktion `updateCompanies` auszuführen, wenn die Komponente geladen wird und wann immer sich die Abfrageparameter ändern. Dies stellt sicher, dass die angezeigten Daten mit der URL synchron gehalten werden;
5. Die Funktion `handleChange` aktualisiert den "name"-Abfrageparameter als Reaktion auf Benutzereingaben. Wenn sich das Eingabefeld ändert, ruft es `setSearchParams` mit dem neuen Parameterwert auf;
6. Im Rückgabewert der Komponente rendern wir ein Eingabefeld für Benutzereingaben und eine Liste von Unternehmen basierend auf den gefilterten Daten.

Dieser Code zeigt, wie man `useSearchParams` und React Router integriert, um eine dynamische Webanwendung zu erstellen, die auf Änderungen in Abfrageparametern reagiert.

Tauchen Sie ein in die Welt des Routings innerhalb von React-Anwendungen und lernen Sie, wie React Router die Verwaltung von Navigation, URL-Zustand und dynamischem Komponenten-Rendering vereinfacht, alles als Reaktion auf die aktuelle URL.

Lernen Sie die theoretischen Grundlagen von Konzepten wie URL, Domain, Protokoll, Abfrageparametern und mehr. Verstehen Sie die Bedeutung des Routings in Webanwendungen und warum wir die React Router-Bibliothek benötigen.

Entdecken Sie, wie Sie eine komplette React-Anwendung von Grund auf erstellen können, mit der Fähigkeit, Inhalte anzuzeigen, die sich basierend auf der URL mit der React Router-Funktionalität anpassen.

Erkunden Sie die Verwendung von Abfragezeichenfolgen zum Teilen und Verwalten des Anwendungszustands über URLs, arbeiten Sie mit verschiedenen Datentypen in Abfrageparametern und nutzen Sie React Router für die Navigation und Effekte basierend auf URL-Änderungen.

React Router

Integration des useSearchParams-Hooks