Kaip atnaujinti užklausos parametrus „React“.

Užklausos parametrai yra pavadinimo ir reikšmės poros, kurias galite pridėti prie URL pabaigos. Jie leidžia saugoti duomenis tame URL.

Vienas praktinių užklausos parametrų pritaikymo būdų yra išsaugoti reikšmes iš vartotojo paieškos.

React Router naudojimas užklausos parametrams atnaujinti

Kai vartotojas įveda užklausą į paieškos juostą, turėtumėte išsaugoti šią užklausą URL. Pavyzdžiui, jei vartotojas tinklaraščių sąraše ieškojo įrašų kategorijoje „reaguoti“, atnaujintas URL turėtų atrodyti taip: /posts? tag=reaguoti.

„React“ suteikia „useSearchParams“ kabliuką, kuris padeda skaityti arba atnaujinti užklausų eilutes.

Norėdami pradėti, sukurkite paieškos juostą programoje App.js.

importuoti { useState } iš"reaguoti"





instagram viewer
;
eksportuotinumatytasfunkcijaProgramėlė() {
konst [query, setquery] = useState('')
konst rankenaKeisti = (e) => {
užklausa(e.taikinys.vertė)
 };
grąžinti (
<div>
<formavaidmenį="Paieška">
<įvestisonChange={handleChange}vertė={query}tipo="Paieška" />
forma>
div>
 );
}

Nepamirškite sekti geriausia praktika naudojant React kad iš jų gautumėte kuo daugiau naudos.

Tada įdiekite „React“ maršrutizatorių ir pridėkite maršrutą prie programos. Tai būtina, kad „useSearchParams“ kabliukas veiktų.

importuoti Reaguoti iš"reaguoti";
importuoti ReactDOM iš„reaguoti/klientas“;
importuoti"./index.css";
importuoti Programėlė iš"./Programa";
importuoti { Naršyklės maršrutizatorius, maršrutas, maršrutai } iš"react-router-dom";
konst root = ReactDOM.createRoot(dokumentas.getElementById("šaknis"));
šaknis.perteikti(
<Reaguoti. Griežtas režimas>
<BrowserRouter>
<Maršrutai>
"/" element={} />
Maršrutai>
BrowserRouter>
Reaguoti. Griežtas režimas>
);

Dabar galite išsaugoti užklausas URL, kai vartotojas įveda, modifikuodami HandChange() funkciją.

importuoti { useState } iš"reaguoti";
importuoti { useSearchParams } iš"react-router-dom";
eksportuotinumatytasfunkcijaProgramėlė() {
konst [query, setquery] = useState("");
konst [searchParams, setSearchParams] = useSearchParams({});
konst rankenaKeisti = (e) => {
nustatyti SearchParams({ užklausą: e.target.value });
užklausa(e.taikinys.vertė);
 };
grąžinti (
<div>
<formavaidmenį="Paieška">
<įvestisonChange={handleChange}vertė={query}tipo="Paieška" />
forma>
div>
 );
}

Užklausos reikšmių gavimas iš URL

Galite gauti vieną užklausos reikšmę naudodami searchParams.get() ir įvesdami užklausos parametro pavadinimą.

konst [searchParams, setSearchParams] = useSearchParams({});
konst vertė = searchParams.get("žyma")

Norėdami gauti visus užklausos parametrus, naudokite searchParams.entries().

konst [searchParams, setSearchParams] = useSearchParams({});
konst reikšmės = searchParams.entries()

Šis metodas grąžina iteratorių, kurį galite kartoti naudodami raktų/reikšmių poras.

dėl (konst [raktas, vertė] apie reikšmės) {
konsolė.log(`${key}, ${value}`);
}

Rakto/reikšmių poros yra tokia tvarka, kokia jos rodomos URL.

Naudokite užklausos parametrus, kad pagerintumėte paieškos rezultatų bendrinamumą

„useSearchParams“ kabliukas puikiai tinka saugoti paieškos reikšmes ar kitus duomenis kaip užklausos parametrus URL.

Taip pat galite sekti paieškos reikšmes naudodami „useState“ kabliuką, tačiau jų išsaugojimas užklausos parametre reiškia, kad žmonės gali jomis bendrinti naudodami URL.