Kuinka päivittää kyselyparametreja Reactissa

Kyselyparametrit ovat nimi/arvo-pareja, jotka voit lisätä URL-osoitteen loppuun. Niiden avulla voit tallentaa tietoja kyseiseen URL-osoitteeseen.

Yksi kyselyparametrien käytännön sovellus on tallentaa arvoja käyttäjän hausta.

React Routerin käyttö kyselyparametrien päivittämiseen

Kun käyttäjä kirjoittaa kyselyn hakupalkkiin, sinun tulee tallentaa se URL-osoitteeseen. Jos käyttäjä esimerkiksi haki blogiluettelosta "react"-luokan viestejä, päivitetyn URL-osoitteen pitäisi näyttää tältä: /posts? tag = reagoi.

React tarjoaa useSearchParams-koukun, joka auttaa sinua lukemaan tai päivittämään kyselyjonoja.

Aloita luomalla hakupalkki App.js: ssä.

tuonti { useState } alkaen"reagoi";
viedäoletuksenatoimintoSovellus() {
konst [query, setquery] = useState(





instagram viewer

'')
konst HandChange = (e) => {
kysely(e.kohde.arvo)
 };
palata (
<div>
<muodossarooli="Hae">
<syöttöonChange={handleChange}arvo={kysely}tyyppi="Hae" />
muodossa>
div>
 );
}

Muista seurata parhaat käytännöt Reactin käytössä saadaksesi niistä kaiken irti.

Asenna seuraavaksi React-reititin ja lisää reititys sovellukseesi. Tämä on välttämätöntä, jotta useSearchParams-koukku toimii.

tuonti Reagoi alkaen"reagoi";
tuonti ReactDOM alkaen"react-dom/client";
tuonti"./index.css";
tuonti Sovellus alkaen"./Sovellus";
tuonti { BrowserRouter, Route, Routes } alkaen"react-router-dom";
konst root = ReactDOM.createRoot(asiakirja.getElementById("juuri"));
juuri.render(
<Reagoi. StrictMode>
<BrowserRouter>
<Reitit>
"/" element={} />
Reitit>
BrowserRouter>
Reagoi. StrictMode>
);

Nyt voit tallentaa kyselyt URL-osoitteeseen käyttäjän kirjoittaessa muokkaamalla handleChange()-funktiota.

tuonti { useState } alkaen"reagoi";
tuonti { useSearchParams } alkaen"react-router-dom";
viedäoletuksenatoimintoSovellus() {
konst [query, setquery] = useState("");
konst [searchParams, setSearchParams] = useSearchParams({});
konst HandChange = (e) => {
setSearchParams({ kysely: e.target.value });
kysely(e.kohde.arvo);
 };
palata (
<div>
<muodossarooli="Hae">
<syöttöonChange={handleChange}arvo={kysely}tyyppi="Hae" />
muodossa>
div>
 );
}

Kyselyarvojen saaminen URL-osoitteesta

Voit saada yhden kyselyn arvon käyttämällä searchParams.get()-komentoa ja välittämällä kyselyparametrin nimen.

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

Saat kaikki kyselyparametrit käyttämällä hakuparametria searchParams.entries().

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

Tämä menetelmä palauttaa iteraattorin, jota voit iteroida käyttämällä avain/arvo-pareja.

varten (konst [avain, arvo] / arvot) {
konsoli.Hirsi(`${key}, ${value}`);
}

Avain/arvo-parit ovat siinä järjestyksessä, jossa ne näkyvät URL-osoitteessa.

Käytä kyselyparametreja hakutulosten jaettavuuden parantamiseen

UseSearchParams-koukku sopii erinomaisesti hakuarvojen tai muiden tietojen tallentamiseen kyselyparametreina URL-osoitteeseen.

Voit myös seurata hakuarvoja useState-koukun avulla, mutta niiden tallentaminen kyselyparametriin tarkoittaa, että ihmiset voivat jakaa ne URL-osoitteen kautta.