Hooken useSearchParams ger tillgång till frågeparametrarna (sökparametrarna) i den aktuella URL:en. Frågeparametrar är nyckel-värde-par som följer efter frågetecknet (?) i en URL. Till exempel, i URL:en http://example.com/products?category=electronics&page=2 är frågeparametrarna category=electronics och page=2.

Vad returnerar useSearchParams?

Hooken useSearchParams returnerar en array med två element: ett objekt som representerar de aktuella frågeparametrarna och en funktion för att uppdatera frågeparametrarna. Så här kan hooken användas:

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

Objektet searchParams är en instans av klassen URLSearchParams. Det tillhandahåller praktiska metoder för att hantera frågeparametrar, såsom:

• get(key): Hämtar värdet som är kopplat till en specifik nyckel;
• getAll(key): Hämtar alla värden som är kopplade till en specifik nyckel;
• set(key, value): Anger eller uppdaterar värdet för en specifik nyckel;
• append(key, value): Lägger till ett nytt värde till en befintlig nyckel;
• delete(key): Tar bort en specifik nyckel och dess tillhörande värde;
• toString(): Returnerar frågeparametrarna som en sträng (t.ex. "?category=electronics&page=2").

setSearchParams-funktionen

Funktionen setSearchParams möjliggör uppdatering av frågeparametrarna i URL:en. Du kan skicka in ett objekt med nyckel-värde-par för att ange nya parametrar eller ändra befintliga. Exempel på användning:

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