A lekérdezési paraméterek frissítése a Reactban

A lekérdezési paraméterek név/érték párok, amelyeket hozzáadhat egy URL végéhez. Lehetővé teszik az adatok tárolását az adott URL-ben.

A lekérdezési paraméterek egyik gyakorlati alkalmazása a felhasználó kereséséből származó értékek tárolása.

A React Router használata a lekérdezési paraméterek frissítéséhez

Amikor a felhasználó beír egy lekérdezést a keresősávba, el kell mentenie a lekérdezést az URL-ben. Például, ha egy felhasználó a blogok listájában a „react” kategóriába tartozó bejegyzésekre keresett, a frissített URL-nek így kell kinéznie: /posts? tag=react.

A React biztosítja a useSearchParams hookot, amely segít olvasni vagy frissíteni a lekérdezési karakterláncokat.

A kezdéshez hozzon létre egy keresősávot az App.js fájlban.

import { useState } tól től"reagál";
exportalapértelmezettfunkcióApp() {
const [query, setquery] = useState('')
const HandChange = (e) => {
setquery(e.cél.érték)
 };
Visszatérés (
<div>
<formaszerep="keresés">
<bemenetonChange={handleChange}érték={lekérdezés}típus="keresés" />
forma>
div>
 );
}

Ne felejtse el követni bevált gyakorlatok a React használata során hogy a legtöbbet hozza ki belőlük.

Ezután telepítse a React útválasztót, és adja hozzá az útválasztást az alkalmazáshoz. Ez elengedhetetlen a useSearchParams hook működéséhez.

import Reagál tól től"reagál";
import ReactDOM tól től"react-dom/kliens";
import"./index.css";
import App tól től"./App";
import { BrowserRouter, Route, Routes } tól től"react-router-dom";
const root = ReactDOM.createRoot(dokumentum.getElementById("gyökér"));
gyökér.Vakol(
<Reagál. StrictMode>
<BrowserRouter>
<Útvonalak>
"/" elem={} />
Útvonalak>
BrowserRouter>
Reagál. StrictMode>
);

Most már elmentheti a lekérdezéseket az URL-ben, ahogy a felhasználó gépel, a handleChange() függvény módosításával.

import { useState } tól től"reagál";
import { useSearchParams } tól től"react-router-dom";
exportalapértelmezettfunkcióApp() {
const [query, setquery] = useState("");
const [searchParams, setSearchParams] = useSearchParams({});
const HandChange = (e) => {
setSearchParams({ lekérdezés: e.target.value });
setquery(e.cél.érték);
 };
Visszatérés (
<div>
<formaszerep="keresés">
<bemenetonChange={handleChange}érték={lekérdezés}típus="keresés" />
forma>
div>
 );
}

A lekérdezési értékek lekérése az URL-ből

Egyetlen lekérdezési értéket kaphat a searchParams.get() használatával és a lekérdezési paraméter nevének átadásával.

const [searchParams, setSearchParams] = useSearchParams({});
const érték = searchParams.get('címke')

Az összes lekérdezési paraméter lekéréséhez használja a searchParams.entries() parancsot.

const [searchParams, setSearchParams] = useSearchParams({});
const értékek = searchParams.entries()

Ez a metódus egy iterátort ad vissza, amelyet kulcs/érték párok segítségével iterálhat.

számára (const [kulcs érték] nak,-nek értékek) {
konzol.log(`${key}, ${value}`);
}

A kulcs/érték párok abban a sorrendben vannak, ahogyan az URL-ben megjelennek.

Használjon lekérdezési paramétereket a keresési eredmények megoszthatóságának javítására

A useSearchParams hook kiválóan alkalmas keresési értékek vagy bármilyen más adat tárolására lekérdezési paraméterként egy URL-ben.

A useState hook segítségével is nyomon követheti a keresési értékeket, de ha lekérdezési paraméterben tárolja őket, akkor az emberek megoszthatják azokat az URL-en keresztül.