Jak aktualizovat parametry dotazu v React

Parametry dotazu jsou páry název/hodnota, které můžete přidat na konec adresy URL. Umožňují vám ukládat data do této adresy URL.

Jednou z praktických aplikací parametrů dotazu je ukládání hodnot z vyhledávání uživatele.

Použití React Router k aktualizaci parametrů dotazu

Když uživatel zadá dotaz do vyhledávacího pole, měli byste tento dotaz uložit do adresy URL. Pokud například uživatel hledal v seznamu blogů příspěvky v kategorii „reakce“, aktualizovaná adresa URL by měla vypadat takto: /posts? tag=reagovat.

React poskytuje háček useSearchParams, který vám pomůže číst nebo aktualizovat řetězce dotazů.

Chcete-li začít, vytvořte vyhledávací pole v App.js.

import { useState } z"reagovat";
vývoznívýchozífunkceAplikace() 





instagram viewer
{
konst [query, setquery] = useState('')
konst handleZměna = (E) => {
setquery(E.cílová.hodnota)
 };
vrátit se (
<div>
<formulářrole="Vyhledávání">
<vstuppři změně={handleChange}hodnota={dotaz}typ="Vyhledávání" />
formulář>
div>
 );
}

Nezapomeňte následovat osvědčené postupy při používání React abyste z nich vytěžili maximum.

Dále nainstalujte React router a přidejte směrování do vaší aplikace. Toto je nutnost, aby háček useSearchParams fungoval.

import Reagovat z"reagovat";
import ReactDOM z"react-dom/client";
import"./index.css";
import Aplikace z"./Aplikace";
import { BrowserRouter, Route, Routes } z"react-router-dom";
konst root = ReactDOM.createRoot(dokument.getElementById("vykořenit"));
vykořenit.poskytnout(
<Reagovat. StrictMode>
<BrowserRouter>
<Trasy>
"/" element={} />
Trasy>
BrowserRouter>
Reagovat. StrictMode>
);

Nyní můžete ukládat dotazy do adresy URL tak, jak uživatel píše, úpravou funkce handleChange().

import { useState } z"reagovat";
import { useSearchParams } z"react-router-dom";
vývoznívýchozífunkceAplikace() {
konst [query, setquery] = useState("");
konst [searchParams, setSearchParams] = useSearchParams({});
konst handleZměna = (E) => {
setSearchParams({ dotaz: e.cílová.hodnota});
setquery(E.cílová.hodnota);
 };
vrátit se (
<div>
<formulářrole="Vyhledávání">
<vstuppři změně={handleChange}hodnota={dotaz}typ="Vyhledávání" />
formulář>
div>
 );
}

Získání hodnot dotazu z adresy URL

Jednu hodnotu dotazu můžete získat pomocí searchParams.get() a předáním názvu parametru dotazu.

konst [searchParams, setSearchParams] = useSearchParams({});
konst hodnota = searchParams.get('štítek')

Chcete-li získat všechny parametry dotazu, použijte searchParams.entries().

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

Tato metoda vrací iterátor, který můžete iterovat pomocí párů klíč/hodnota.

pro (konst [klíč, hodnota] z hodnoty) {
řídicí panel.log(`${key}, ${value}`);
}

Páry klíč/hodnota jsou v pořadí, v jakém se objevují v adrese URL.

Použijte parametry dotazu ke zlepšení možnosti sdílení výsledků vyhledávání

Háček useSearchParams je skvělý pro ukládání hledaných hodnot nebo jakýchkoli jiných dat jako parametrů dotazu v adrese URL.

Hodnoty vyhledávání můžete také sledovat pomocí háčku useState, ale jejich uložení do parametru dotazu znamená, že je lidé mohou sdílet prostřednictvím adresy URL.