Sådan opdateres forespørgselsparametre i React

Forespørgselsparametre er navn/værdi-par, som du kan tilføje til slutningen af ​​en URL. De giver dig mulighed for at gemme data i den URL.

En praktisk anvendelse af forespørgselsparametre er at gemme værdier fra en brugers søgning.

Brug af React Router til at opdatere forespørgselsparametre

Når en bruger indtaster en forespørgsel i en søgelinje, skal du gemme forespørgslen i URL'en. Hvis en bruger f.eks. søgte på en liste over blogs efter indlæg i kategorien "reager", skulle den opdaterede URL se sådan ud: /posts? tag=reager.

React leverer useSearchParams-hook, der hjælper dig med at læse eller opdatere forespørgselsstrenge.

For at komme i gang skal du oprette en søgelinje i App.js.

importere { useState } fra





instagram viewer

"reagere";
eksportStandardfungereApp() {
konst [query, setquery] = useState('')
konst handleChange = (e) => {
sætquery(e.mål.værdi)
 };
Vend tilbage (
<div>
<formrolle="Søg">
<inputpå Skift={handleChange}værdi={forespørgsel}type="Søg" />
form>
div>
 );
}

Husk at følge med bedste praksis ved brug af React for at få mest muligt ud af dem.

Installer derefter React-router og tilføj routing til din applikation. Dette er et must for at useSearchParams-krogen fungerer.

importere Reagere fra"reagere";
importere ReactDOM fra"reager-dom/klient";
importere"./index.css";
importere App fra"./App";
importere { BrowserRouter, Rute, Ruter } fra"reager-router-dom";
konst root = ReactDOM.createRoot(dokument.getElementById("rod"));
rod.render(
<Reagere. StrictMode>
<BrowserRouter>
<Ruter>
"/" element={} />
Ruter>
BrowserRouter>
Reagere. StrictMode>
);

Nu kan du gemme forespørgslerne i URL'en, som brugeren skriver ved at ændre handleChange()-funktionen.

importere { useState } fra"reagere";
importere { useSearchParams } fra"reager-router-dom";
eksportStandardfungereApp() {
konst [query, setquery] = useState("");
konst [searchParams, setSearchParams] = useSearchParams({});
konst handleChange = (e) => {
setSearchParams({ forespørgsel: e.target.value });
sætquery(e.mål.værdi);
 };
Vend tilbage (
<div>
<formrolle="Søg">
<inputpå Skift={handleChange}værdi={forespørgsel}type="Søg" />
form>
div>
 );
}

Hent forespørgselsværdierne fra URL'en

Du kan få en enkelt forespørgselsværdi ved at bruge searchParams.get() og sende forespørgselsparameterens navn.

konst [searchParams, setSearchParams] = useSearchParams({});
konst værdi = searchParams.get('tag')

For at få alle forespørgselsparametrene, brug searchParams.entries().

konst [searchParams, setSearchParams] = useSearchParams({});
konst værdier = searchParams.entries()

Denne metode returnerer en iterator, du kan iterere ved hjælp af nøgle/værdi-par.

til (konst [nøgle, værdi] af værdier) {
konsol.log(`${key}, ${value}`);
}

Nøgle/værdi-parrene er i den rækkefølge, de vises i URL'en.

Brug forespørgselsparametre til at forbedre delebarheden af ​​søgeresultater

UseSearchParams-krogen er fantastisk til at gemme søgeværdier eller andre data som forespørgselsparametre i en URL.

Du kan også holde styr på søgeværdier med useState-hooken, men at gemme dem i en forespørgselsparameter betyder, at folk kan dele dem via URL'en.