Hvordan oppdatere spørringsparametere i React

Søkeparametere er navn/verdi-par som du kan legge til på slutten av en URL. De lar deg lagre data i den nettadressen.

En praktisk anvendelse av søkeparametere er å lagre verdier fra en brukers søk.

Bruke React Router for å oppdatere spørringsparametre

Når en bruker skriver inn et søk i et søkefelt, bør du lagre det søket i URL-en. For eksempel, hvis en bruker søkte på en liste over blogger etter innlegg i «reager»-kategorien, skal den oppdaterte nettadressen se slik ut: /posts? tag=reager.

React gir useSearchParams-kroken som hjelper deg med å lese eller oppdatere søkestrenger.

For å komme i gang, opprett en søkefelt i App.js.

import { useState } fra"reagere";
eksportmisligholdefunksjonApp() {
konst [query, setquery] = useState(





instagram viewer

'')
konst handleChange = (e) => {
setquery(e.mål.verdi)
 };
komme tilbake (
<div>
<formrolle="Søk">
<inputpå Endre={handleChange}verdi={spørsmål}type="Søk" />
form>
div>
 );
}

Husk å følge med beste praksis når du bruker React for å få mest mulig ut av dem.

Installer deretter React-ruteren og legg til ruting i applikasjonen din. Dette er et must for at useSearchParams-kroken skal fungere.

import Reagere fra"reagere";
import ReactDOM fra"reager-dom/klient";
import"./index.css";
import App fra"./App";
import { BrowserRouter, Route, Routes } fra"reager-ruter-dom";
konst root = ReactDOM.createRoot(dokument.getElementById("rot"));
rot.render(
<Reagere. StrictMode>
<Nettleserruter>
<Ruter>
"/" element={} />
Ruter>
Nettleserruter>
Reagere. StrictMode>
);

Nå kan du lagre spørringene i URL-en som brukeren skriver ved å endre handleChange()-funksjonen.

import { useState } fra"reagere";
import { useSearchParams } fra"reager-ruter-dom";
eksportmisligholdefunksjonApp() {
konst [query, setquery] = useState("");
konst [searchParams, setSearchParams] = useSearchParams({});
konst handleChange = (e) => {
setSearchParams({ spørsmål: e.target.value });
setquery(e.mål.verdi);
 };
komme tilbake (
<div>
<formrolle="Søk">
<inputpå Endre={handleChange}verdi={spørsmål}type="Søk" />
form>
div>
 );
}

Hente spørringsverdiene fra URL-en

Du kan få en enkelt spørringsverdi ved å bruke searchParams.get() og sende inn søkeparameterens navn.

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

For å få alle søkeparametrene, bruk searchParams.entries().

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

Denne metoden returnerer en iterator du kan iterere ved hjelp av nøkkel/verdi-par.

til (konst [nøkkel, verdi] av verdier) {
konsoll.Logg(`${key}, ${value}`);
}

Nøkkel/verdi-parene er i den rekkefølgen de vises i URL-en.

Bruk søkeparametere for å forbedre deling av søkeresultater

UseSearchParams-kroken er flott for å lagre søkeverdier eller andre data som søkeparametere i en URL.

Du kan også holde styr på søkeverdier med useState-kroken, men å lagre dem i en søkeparameter betyr at folk kan dele dem via URL-en.