Arbeiten mit Abfrageparametern

Der useSearchParams-Hook bietet Zugriff auf die Abfrageparameter (Suchparameter) der aktuellen URL. Abfrageparameter sind Schlüssel-Wert-Paare, die auf das Fragezeichen (?) in einer URL folgen. Zum Beispiel sind in der URL http://example.com/products?category=electronics&page=2 die Abfrageparameter category=electronics und page=2.

Was gibt useSearchParams zurück?

Der useSearchParams-Hook gibt ein Array mit zwei Elementen zurück: ein Objekt, das die aktuellen Abfrageparameter repräsentiert, und eine Funktion zum Aktualisieren der Abfrageparameter. Die Verwendung des Hooks sieht folgendermaßen aus:

import { useSearchParams } from "react-router-dom";

function MyComponent() {
  const [searchParams, setSearchParams] = useSearchParams();

  // `searchParams` is an object representing the current query parameters
  // `setSearchParams` is a function to update the query parameters
}

Das searchParams-Objekt

Das searchParams-Objekt ist eine Instanz der Klasse URLSearchParams. Es bietet praktische Methoden zur Interaktion mit Query-Parametern, wie zum Beispiel:

• get(key): Ruft den Wert ab, der einem bestimmten Schlüssel zugeordnet ist;
• getAll(key): Ruft alle Werte ab, die einem bestimmten Schlüssel zugeordnet sind;
• set(key, value): Setzt oder aktualisiert den Wert eines bestimmten Schlüssels;
• append(key, value): Fügt einem bestehenden Schlüssel einen neuen Wert hinzu;
• delete(key): Löscht einen bestimmten Schlüssel und dessen zugeordneten Wert;
• toString(): Gibt die Query-Parameter als Zeichenkette zurück (z. B. "?category=electronics&page=2").

Die setSearchParams-Funktion

Die Funktion setSearchParams ermöglicht das Aktualisieren der Query-Parameter in der URL. Sie können ihr ein Objekt mit Schlüssel-Wert-Paaren übergeben, um neue Parameter zu setzen oder bestehende zu ändern. Hier ein Beispiel für die Verwendung:

// Suppose the current URL is `http://example.com/products?category=electronics&page=2`

setSearchParams({ category: "clothing", color: "blue" });

// The URL is now `http://example.com/products?category=clothing&color=blue`