Hur man uppdaterar frågeparametrar i React

Frågeparametrar är namn/värdepar som du kan lägga till i slutet av en URL. De låter dig lagra data i den webbadressen.

En praktisk tillämpning av frågeparametrar är att lagra värden från en användares sökning.

Använda React Router för att uppdatera frågeparametrar

När en användare anger en fråga i ett sökfält, bör du lagra den frågan i URL: en. Om en användare till exempel sökte i en lista med bloggar efter inlägg i kategorin "reagera", bör den uppdaterade webbadressen se ut så här: /posts? tag=reagera.

React tillhandahåller useSearchParams-kroken som hjälper dig att läsa eller uppdatera frågesträngar.

För att komma igång, skapa ett sökfält i App.js.

importera { useState } från"reagera";
exporterastandardfungeraApp() {
konst





instagram viewer
 [query, setquery] = useState('')
konst handleChange = (e) => {
setquery(e.mål.värde)
 };
lämna tillbaka (
<div>
<formroll="Sök">
<inmatningpå Ändra={handleChange}värde={fråga}typ="Sök" />
form>
div>
 );
}

Kom ihåg att följa bästa praxis när du använder React för att få ut det mesta av dem.

Installera sedan React-router och lägg till routing till din applikation. Detta är ett måste för att useSearchParams-kroken ska fungera.

importera Reagera från"reagera";
importera ReactDOM från"reagera-dom/klient";
importera"./index.css";
importera App från"./App";
importera { BrowserRouter, Route, Routes } från"reagera-router-dom";
konst root = ReactDOM.createRoot(dokumentera.getElementById("rot"));
rot.framställa(
<Reagera. StrictMode>
<BrowserRouter>
<Rutter>
"/" element={} />
Rutter>
BrowserRouter>
Reagera. StrictMode>
);

Nu kan du spara frågorna i URL: en som användaren skriver genom att ändra handleChange()-funktionen.

importera { useState } från"reagera";
importera { useSearchParams } från"reagera-router-dom";
exporterastandardfungeraApp() {
konst [query, setquery] = useState("");
konst [searchParams, setSearchParams] = useSearchParams({});
konst handleChange = (e) => {
setSearchParams({ fråga: e.target.value });
setquery(e.mål.värde);
 };
lämna tillbaka (
<div>
<formroll="Sök">
<inmatningpå Ändra={handleChange}värde={fråga}typ="Sök" />
form>
div>
 );
}

Hämta frågevärden från URL: en

Du kan få ett enskilt frågevärde genom att använda searchParams.get() och skicka in frågeparameterns namn.

konst [searchParams, setSearchParams] = useSearchParams({});
konst värde = searchParams.get('märka')

För att få alla frågeparametrar, använd searchParams.entries().

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

Denna metod returnerar en iterator som du kan iterera med nyckel/värdepar.

för (konst [nyckelvärde] av värden) {
trösta.logga(`${key}, ${value}`);
}

Nyckel/värdeparen är i den ordning de visas i URL: en.

Använd frågeparametrar för att förbättra sökresultatens delbarhet

UseSearchParams-kroken är utmärkt för att lagra sökvärden eller andra data som frågeparametrar i en URL.

Du kan också hålla reda på sökvärden med useState-kroken, men att lagra dem i en frågeparameter innebär att människor kan dela dem via URL: en.