Cum să actualizați parametrii de interogare în React

Parametrii de interogare sunt perechi nume/valoare pe care le puteți adăuga la sfârșitul unei adrese URL. Acestea vă permit să stocați date în acea adresă URL.

O aplicație practică a parametrilor de interogare este stocarea valorilor din căutarea unui utilizator.

Utilizarea React Router pentru a actualiza parametrii de interogare

Când un utilizator introduce o interogare într-o bară de căutare, ar trebui să stocați acea interogare în adresa URL. De exemplu, dacă un utilizator a căutat într-o listă de bloguri postări din categoria „reacționează”, adresa URL actualizată ar trebui să arate astfel: /posts? tag=reactioneaza.

React oferă cârligul useSearchParams care vă ajută să citiți sau să actualizați șirurile de interogări.

Pentru a începe, creați o bară de căutare în App.js.

import { useState } din"reacţiona";
exportMod implicitfuncţieApp() {
const [interogare, setquery] = useState('')
const handleChange = (e) => {
setquery(e.ţintă.valoare)
 };
întoarcere (
<div>
<formărol="căutare">
<intrarecu privire la schimbările={handleChange}valoare={interogare}tip="căutare" />
formă>
div>
 );
}

Amintiți-vă să urmați cele mai bune practici atunci când utilizați React pentru a profita la maximum de ele.

Apoi, instalați routerul React și adăugați rutare la aplicația dvs. Aceasta este o necesitate pentru ca hook-ul useSearchParams să funcționeze.

import Reacţiona din"reacţiona";
import ReactDOM din"react-dom/client";
import„./index.css”;
import App din„./Aplicație”;
import { BrowserRouter, Route, Routes } din"react-router-dom";
const root = ReactDOM.createRoot(document.getElementById("rădăcină"));
rădăcină.face(
<Reacţiona. StrictMode>
<BrowserRouter>
<Trasee>
"/" element={} />
Trasee>
BrowserRouter>
Reacţiona. StrictMode>
);

Acum puteți salva interogările în URL-ul pe măsură ce utilizatorul introduce, modificând funcția handleChange().

import { useState } din"reacţiona";
import { useSearchParams } din"react-router-dom";
exportMod implicitfuncţieApp() {
const [interogare, setquery] = useState("");
const [searchParams, setSearchParams] = useSearchParams({});
const handleChange = (e) => {
setSearchParams({ interogare: e.target.value });
setquery(e.ţintă.valoare);
 };
întoarcere (
<div>
<formărol="căutare">
<intrarecu privire la schimbările={handleChange}valoare={interogare}tip="căutare" />
formă>
div>
 );
}

Obținerea valorilor de interogare de la adresa URL

Puteți obține o singură valoare de interogare folosind searchParams.get() și introducând numele parametrului de interogare.

const [searchParams, setSearchParams] = useSearchParams({});
const valoare = searchParams.get('etichetă')

Pentru a obține toți parametrii de interogare, utilizați searchParams.entries().

const [searchParams, setSearchParams] = useSearchParams({});
const valori = searchParams.entries()

Această metodă returnează un iterator pe care îl puteți itera folosind perechi cheie/valoare.

pentru (const [valoare cheie] de valori) {
consolă.Buturuga(`${key}, ${value}`);
}

Perechile cheie/valoare sunt în ordinea în care apar în adresa URL.

Utilizați parametrii de interogare pentru a îmbunătăți gradul de partajare a rezultatelor căutării

Cârligul useSearchParams este excelent pentru stocarea valorilor de căutare sau a oricăror alte date ca parametri de interogare într-o adresă URL.

De asemenea, puteți urmări valorile de căutare cu ajutorul cârligului useState, dar stocarea lor într-un parametru de interogare înseamnă că oamenii le pot partaja prin intermediul adresei URL.