Arbejde med Forespørgselsparametre

Hooken useSearchParams giver adgang til forespørgselsparametrene (søgeparametre) i den aktuelle URL. Forespørgselsparametre er nøgle-værdi-par, der følger efter spørgsmålstegnet (?) i en URL. For eksempel, i URL'en http://example.com/products?category=electronics&page=2, er forespørgselsparametrene category=electronics og page=2.

Hvad returnerer useSearchParams?

Hooken useSearchParams returnerer et array med to elementer: et objekt, der repræsenterer de aktuelle forespørgselsparametre, og en funktion til at opdatere forespørgselsparametrene. Sådan kan hooken anvendes:

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
}

searchParams-objektet

searchParams-objektet er en instans af URLSearchParams-klassen. Det tilbyder praktiske metoder til at interagere med forespørgselsparametre, såsom:

• get(key): Henter værdien, der er tilknyttet en bestemt nøgle;
• getAll(key): Henter alle værdier, der er tilknyttet en bestemt nøgle;
• set(key, value): Angiver eller opdaterer værdien for en bestemt nøgle;
• append(key, value): Tilføjer en ny værdi til en eksisterende nøgle;
• delete(key): Sletter en bestemt nøgle og dens tilknyttede værdi;
• toString(): Returnerer forespørgselsparametrene som en streng (f.eks. "?category=electronics&page=2").

setSearchParams-funktionen

Funktionen setSearchParams gør det muligt at opdatere forespørgselsparametrene i URL'en. Du kan give den et objekt med nøgle-værdi-par for at angive nye parametre eller ændre eksisterende. Her er et eksempel på, hvordan den bruges:

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