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:

js

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:

js

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 5

Fragen Sie AI

expand
ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

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:

js

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:

js

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 5
Wir sind enttäuscht, dass etwas schief gelaufen ist. Was ist passiert?
some-alt