Työskentely Kyselyparametrien Kanssa
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`
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you explain how to read a specific query parameter using useSearchParams?
How do I update or add a new query parameter with setSearchParams?
What happens to the existing parameters when I use setSearchParams?
Awesome!
Completion rate improved to 4.17Työskentely Kyselyparametrien Kanssa
Pyyhkäise näyttääksesi valikon
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`
Kiitos palautteestasi!
