Kako ažurirati parametre upita u Reactu

Parametri upita su parovi ime/vrijednost koje možete dodati na kraj URL-a. Omogućuju vam pohranu podataka u taj URL.

Jedna praktična primjena parametara upita je pohranjivanje vrijednosti iz korisničkog pretraživanja.

Korištenje React Routera za ažuriranje parametara upita

Kada korisnik unese upit u traku za pretraživanje, trebali biste taj upit pohraniti u URL. Na primjer, ako je korisnik pretraživao popis blogova za postove u kategoriji "reagirati", ažurirani URL trebao bi izgledati ovako: /posts? oznaka=reagirati.

React pruža useSearchParams kuku koja vam pomaže čitati ili ažurirati nizove upita.

Za početak izradite traku za pretraživanje u App.js.

uvoz {useState} iz"reagirati";
izvozzadanofunkcijaaplikacija() {
konst [upit, setquery] = useState(





instagram viewer

'')
konst handleChange = (e) => {
postavljanje upita(e.cilj.vrijednost)
 };
povratak (
<div>
<oblikuloga="traži">
<ulaznionChange={handleChange}vrijednost={upit}tip="traži" />
oblik>
div>
 );
}

Ne zaboravite slijediti najbolje prakse pri korištenju Reacta kako bi izvukli maksimum iz njih.

Zatim instalirajte React router i dodajte usmjeravanje svojoj aplikaciji. Ovo je neophodno kako bi kuka useSearchParams radila.

uvoz Reagirati iz"reagirati";
uvoz ReactDOM iz"react-dom/klijent";
uvoz"./index.css";
uvoz aplikacija iz"./Aplikacija";
uvoz {BrowserRouter, Route, Routes} iz"react-router-dom";
konst korijen = ReactDOM.createRoot(dokument.getElementById("korijen"));
korijen.renderirati(
<Reagirati. StrictMode>
<BrowserRouter>
<Rute>
"/" element={} />
Rute>
BrowserRouter>
Reagirati. StrictMode>
);

Sada možete spremiti upite u URL dok korisnik upisuje modificiranjem funkcije handleChange().

uvoz {useState} iz"reagirati";
uvoz { useSearchParams } iz"react-router-dom";
izvozzadanofunkcijaaplikacija() {
konst [upit, setquery] = useState("");
konst [searchParams, setSearchParams] = useSearchParams({});
konst handleChange = (e) => {
setSearchParams({ upit: e.target.value });
postavljanje upita(e.cilj.vrijednost);
 };
povratak (
<div>
<oblikuloga="traži">
<ulaznionChange={handleChange}vrijednost={upit}tip="traži" />
oblik>
div>
 );
}

Dohvaćanje vrijednosti upita iz URL-a

Možete dobiti jednu vrijednost upita pomoću searchParams.get() i prosljeđivanjem naziva parametra upita.

konst [searchParams, setSearchParams] = useSearchParams({});
konst vrijednost = searchParams.get('označiti')

Za dobivanje svih parametara upita upotrijebite searchParams.entries().

konst [searchParams, setSearchParams] = useSearchParams({});
konst vrijednosti = searchParams.entries()

Ova metoda vraća iterator koji možete ponavljati pomoću parova ključ/vrijednost.

za (konst [ključ, vrijednost] od vrijednosti) {
konzola.log(`${ključ}, ${value}`);
}

Parovi ključ/vrijednost su redoslijedom kojim se pojavljuju u URL-u.

Koristite parametre upita za poboljšanje dijeljenja rezultata pretraživanja

UseSearchParams hook izvrstan je za pohranjivanje vrijednosti pretraživanja ili bilo kojih drugih podataka kao parametara upita u URL-u.

Također možete pratiti vrijednosti pretraživanja pomoću kuke useState, ali njihovo pohranjivanje u parametar upita znači da ih ljudi mogu dijeliti putem URL-a.