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

bookArbeiten 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`

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 5

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

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

Awesome!

Completion rate improved to 4.17

bookArbeiten 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`

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 5
some-alt