Kuidas värskendada Reactis päringuparameetreid

Päringu parameetrid on nime/väärtuse paarid, mille saate lisada URL-i lõppu. Need võimaldavad teil selles URL-is andmeid salvestada.

Päringuparameetrite üks praktiline rakendus on kasutaja otsingu väärtuste salvestamine.

Reacti ruuteri kasutamine päringuparameetrite värskendamiseks

Kui kasutaja sisestab päringu otsinguribale, peaksite selle päringu URL-i salvestama. Näiteks kui kasutaja otsis ajaveebide loendist postitusi kategoorias "reageerida", peaks värskendatud URL välja nägema järgmine: /posts? tag=reageerida.

React pakub konksu useSearchParams, mis aitab teil päringustringe lugeda või värskendada.

Alustamiseks looge rakenduses App.js otsinguriba.

importida { useState } alates"reageerida";
eksportidavaikimisifunktsiooniRakendus() 





instagram viewer
{
konst [query, setquery] = useState('')
konst käepideChange = (e) => {
seadistus(e.sihtmärk.väärtus)
 };
tagasi (
<div>
<vormirolli="otsing">
<sisendonChange={handleChange}väärtus={päring}tüüp="otsing" />
vormi>
div>
 );
}

Ärge unustage järgida parimaid tavasid Reacti kasutamisel et neist maksimumi võtta.

Järgmisena installige Reacti ruuter ja lisage oma rakendusele marsruutimine. See on kohustuslik, et useSearchParams konks töötaks.

importida Reageerige alates"reageerida";
importida ReactDOM alates"reageerimine/klient";
importida"./index.css";
importida Rakendus alates"./Rakendus";
importida { BrowserRouter, Route, Routes } alates"react-ruuter-dom";
konst root = ReactDOM.createRoot(dokument.getElementById("juur"));
juur.renderdada(
<Reageerige. Range režiim>
<BrowserRouter>
<Marsruudid>
"/" element={} />
Marsruudid>
BrowserRouter>
Reageerige. Range režiim>
);

Nüüd saate päringuid URL-i salvestada, kui kasutaja sisestab, muutes funktsiooni handleChange().

importida { useState } alates"reageerida";
importida { useSearchParams } alates"react-ruuter-dom";
eksportidavaikimisifunktsiooniRakendus() {
konst [query, setquery] = useState("");
konst [searchParams, setSearchParams] = useSearchParams({});
konst käepideChange = (e) => {
setSearchParams({ päring: e.target.value });
seadistus(e.sihtmärk.väärtus);
 };
tagasi (
<div>
<vormirolli="otsing">
<sisendonChange={handleChange}väärtus={päring}tüüp="otsing" />
vormi>
div>
 );
}

Päringu väärtuste hankimine URL-ist

Saate ühe päringuväärtuse hankida kasutades searchParams.get() ja sisestades päringuparameetri nime.

konst [searchParams, setSearchParams] = useSearchParams({});
konst väärtus = searchParams.get('silt')

Kõigi päringuparameetrite hankimiseks kasutage käsku searchParams.entries().

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

See meetod tagastab iteraatori, mida saate võtme/väärtuste paaride abil itereerida.

jaoks (konst [võti, väärtus] kohta väärtused) {
konsool.log(`${key}, ${value}`);
}

Võtme/väärtuse paarid on URL-is kuvamise järjekorras.

Kasutage päringu parameetreid, et parandada otsingutulemuste jagatavust

Konks useSearchParams on suurepärane otsinguväärtuste või muude andmete salvestamiseks URL-is päringuparameetritena.

Otsinguväärtusi saate jälgida ka konksuga useState, kuid nende salvestamine päringuparameetrisse tähendab, et inimesed saavad neid URL-i kaudu jagada.