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`
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Can you explain how to read a specific query parameter using useSearchParams?
How do I update or add a new query parameter with setSearchParams?
What happens to the existing parameters when I use setSearchParams?
Awesome!
Completion rate improved to 4.17Arbeiten mit Abfrageparametern
Swipe um das Menü anzuzeigen
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`
Danke für Ihr Feedback!
