useSearchParams on hook, joka tarjoaa pääsyn nykyisen URL-osoitteen kyselyparametreihin (search parameters). Kyselyparametrit ovat avain-arvo-pareja, jotka seuraavat kysymysmerkkiä (?) URL-osoitteessa. Esimerkiksi URL-osoitteessa http://example.com/products?category=electronics&page=2 kyselyparametrit ovat category=electronics ja page=2.

Mitä useSearchParams palauttaa?

useSearchParams-hook palauttaa taulukon, jossa on kaksi alkiota: objekti, joka edustaa nykyisiä kyselyparametreja, sekä funktio, jolla kyselyparametreja voi päivittää. Näin hookia käytetään:

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-objekti

searchParams-objekti on URLSearchParams-luokan ilmentymä. Se tarjoaa käteviä menetelmiä kyselyparametrien käsittelyyn, kuten:

• get(key): Hakee tiettyyn avaimen liitetyn arvon;
• getAll(key): Hakee kaikki tiettyyn avaimen liitetyt arvot;
• set(key, value): Asettaa tai päivittää tietyn avaimen arvon;
• append(key, value): Lisää uuden arvon olemassa olevaan avaimeen;
• delete(key): Poistaa tietyn avaimen ja siihen liitetyn arvon;
• toString(): Palauttaa kyselyparametrit merkkijonona (esim. "?category=electronics&page=2").

setSearchParams-funktio

setSearchParams-funktiolla voidaan päivittää URL-osoitteen kyselyparametreja. Sille voidaan antaa olio, jossa on avain-arvo-pareja uusien parametrien asettamiseksi tai olemassa olevien muokkaamiseksi. Esimerkki käytöstä:

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