Werken met Queryparameters

De useSearchParams is een hook die toegang biedt tot de queryparameters (zoekparameters) van de huidige URL. Queryparameters zijn sleutel-waardeparen die volgen op het vraagteken (?) in een URL. Bijvoorbeeld, in de URL http://example.com/products?category=electronics&page=2, zijn de queryparameters category=electronics en page=2.

Wat geeft useSearchParams terug?

De useSearchParams hook retourneert een array met twee elementen: een object dat de huidige queryparameters vertegenwoordigt en een functie om de queryparameters bij te werken. Zo gebruik je de hook:

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
}

Het searchParams-object

Het searchParams-object is een instantie van de URLSearchParams-klasse. Het biedt handige methoden om met queryparameters te werken, zoals:

• get(key): Haalt de waarde op die is gekoppeld aan een specifieke sleutel;
• getAll(key): Haalt alle waarden op die zijn gekoppeld aan een specifieke sleutel;
• set(key, value): Stelt de waarde van een specifieke sleutel in of werkt deze bij;
• append(key, value): Voegt een nieuwe waarde toe aan een bestaande sleutel;
• delete(key): Verwijdert een specifieke sleutel en de bijbehorende waarde;
• toString(): Geeft de queryparameters terug als een tekenreeks (bijvoorbeeld "?category=electronics&page=2").

De setSearchParams-functie

De setSearchParams-functie maakt het mogelijk om de queryparameters in de URL bij te werken. U kunt een object met sleutel-waardeparen doorgeven om nieuwe parameters in te stellen of bestaande te wijzigen. Hier volgt een voorbeeld van het gebruik:

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