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. So kann der Hook verwendet werden:
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 URLSearchParams-Klasse. Es stellt praktische Methoden zur Interaktion mit Query-Parametern bereit, wie zum Beispiel:
get(key): Gibt den Wert zurück, der mit einem bestimmten Schlüssel verknüpft ist;getAll(key): Gibt alle Werte zurück, 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 dessen zugehörigen 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. Es kann ein Objekt mit Schlüssel-Wert-Paaren übergeben werden, um neue Parameter zu setzen oder bestehende zu ändern. Nachfolgend ein Beispiel zur 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 query 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. So kann der Hook verwendet werden:
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 URLSearchParams-Klasse. Es stellt praktische Methoden zur Interaktion mit Query-Parametern bereit, wie zum Beispiel:
get(key): Gibt den Wert zurück, der mit einem bestimmten Schlüssel verknüpft ist;getAll(key): Gibt alle Werte zurück, 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 dessen zugehörigen 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. Es kann ein Objekt mit Schlüssel-Wert-Paaren übergeben werden, um neue Parameter zu setzen oder bestehende zu ändern. Nachfolgend ein Beispiel zur 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!
