Kursinhalt
React Router
React Router
Arbeiten mit Query-Parametern
Der useSearchParams
ist ein Hook, der Zugriff auf die Abfrageparameter (Suchparameter) der aktuellen URL bietet. Abfrageparameter sind Schlüssel-Wert-Paare, die dem 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 darstellt, und eine Funktion, um die Abfrageparameter zu aktualisieren. So können Sie den Hook verwenden:
Das searchParams Objekt
Das searchParams
Objekt ist eine Instanz der URLSearchParams
Klasse. Es bietet praktische Methoden zur Interaktion mit Abfrageparametern, wie zum Beispiel:
get(key)
: Ruft den Wert ab, der mit einem bestimmten Schlüssel verknüpft ist;getAll(key)
: Ruft alle Werte ab, die mit einem bestimmten Schlüssel verknüpft 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 seinen zugehörigen Wert;toString()
: Gibt die Abfrageparameter als Zeichenkette zurück (z.B."?category=electronics&page=2"
).
Die setSearchParams Funktion
Die setSearchParams
Funktion ermöglicht es Ihnen, die Abfrageparameter in der URL zu aktualisieren. Sie können ihr ein Objekt mit Schlüssel-Wert-Paaren übergeben, um neue Parameter zu setzen oder bestehende zu ändern. Hier ist ein Beispiel, wie man sie verwendet:
Danke für Ihr Feedback!