Jak zaktualizować parametry zapytania w React

Parametry zapytania to pary nazwa/wartość, które można dodać na końcu adresu URL. Umożliwiają przechowywanie danych pod tym adresem URL.

Jednym z praktycznych zastosowań parametrów zapytania jest przechowywanie wartości z wyszukiwania użytkownika.

Używanie React Router do aktualizacji parametrów zapytania

Gdy użytkownik wprowadza zapytanie do paska wyszukiwania, należy zapisać to zapytanie w adresie URL. Na przykład, jeśli użytkownik przeszukiwał listę blogów w poszukiwaniu postów z kategorii „reaguj”, zaktualizowany adres URL powinien wyglądać następująco: /posts? tag = zareaguj.

React udostępnia hak useSearchParams, który pomaga czytać lub aktualizować ciągi zapytań.

Aby rozpocząć, utwórz pasek wyszukiwania w App.js.

import { stan użycia } z"reagować";
eksportdomyślnyfunkcjonowaćAplikacja() {
konst [zapytanie, ustawione zapytanie] = useState('')
konst zmiana uchwytu = (mi) => {
zapytanie(mi.cel.wartość)
 };
powrót (
<dz>
<formularzrola="szukaj">
<wejścienaZmień={zmiana uchwytu}wartość={zapytanie}typ="szukaj" />
formularz>
dz>
 );
}

Pamiętaj, aby śledzić najlepsze praktyki podczas korzystania z React aby wyciągnąć z nich jak najwięcej.

Następnie zainstaluj router React i dodaj routing do swojej aplikacji. Jest to konieczne, aby hak useSearchParams działał.

import Reagować z"reagować";
import ReactDOM z„reaguj/klient”;
import"./index.css";
import Aplikacja z„./Aplikacja”;
import { BrowserRouter, Trasa, Trasy } z„React-router-dom”;
konst root = ReactDOM.createRoot(dokument.getElementById("źródło"));
źródło.renderowanie(
<Reagować. Tryb ścisły>
<PrzeglądarkaRouter>
<Trasy>
"/" element={} />
Trasy>
PrzeglądarkaRouter>
Reagować. Tryb ścisły>
);

Teraz możesz zapisywać zapytania w adresie URL w miarę wpisywania przez użytkownika, modyfikując funkcję handleChange().

import { stan użycia } z"reagować";
import { useSearchParams } z„React-router-dom”;
eksportdomyślnyfunkcjonowaćAplikacja() {
konst [zapytanie, ustawione zapytanie] = useState("");
konst [searchParams, setSearchParams] = useSearchParams({});
konst zmiana uchwytu = (mi) => {
setSearchParams({ zapytanie: e.wartość docelowa });
zapytanie(mi.cel.wartość);
 };
powrót (
<dz>
<formularzrola="szukaj">
<wejścienaZmień={zmiana uchwytu}wartość={zapytanie}typ="szukaj" />
formularz>
dz>
 );
}

Pobieranie wartości zapytania z adresu URL

Możesz uzyskać pojedynczą wartość zapytania, używając searchParams.get() i przekazując nazwę parametru zapytania.

konst [searchParams, setSearchParams] = useSearchParams({});
konst wartość = searchParams.get('etykietka')

Aby uzyskać wszystkie parametry zapytania, użyj searchParams.entries().

konst [searchParams, setSearchParams] = useSearchParams({});
konst wartości = searchParams.entries()

Ta metoda zwraca iterator, który można iterować przy użyciu par klucz/wartość.

Do (konst [kluczowa wartość] z wartości) {
konsola.dziennik(`${klucz}, ${wartość}`);
}

Pary klucz/wartość są ułożone w kolejności, w jakiej pojawiają się w adresie URL.

Użyj parametrów zapytania, aby poprawić udostępnianie wyników wyszukiwania

Hak useSearchParams doskonale nadaje się do przechowywania wartości wyszukiwania lub innych danych jako parametrów zapytania w adresie URL.

Możesz także śledzić wartości wyszukiwania za pomocą haka useState, ale przechowywanie ich w parametrze zapytania oznacza, że ​​ludzie mogą je udostępniać za pośrednictwem adresu URL.