Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Arbeiten mit Query-Parametern | Fortgeschrittene React Router Konzepte
React Router
course content

Kursinhalt

React Router

React Router

1. Konzeptioneller Überblick
2. Grundkonzepte von React Router
3. Fortgeschrittene React Router Konzepte

book
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:

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 5
We're sorry to hear that something went wrong. What happened?
some-alt