React'te Sorgu Paramları Nasıl Güncellenir?

Sorgu parametreleri, bir URL'nin sonuna ekleyebileceğiniz ad/değer çiftleridir. Bu URL'de veri depolamanıza izin verirler.

Sorgu parametrelerinin pratik bir uygulaması, bir kullanıcının aramasından değerleri depolamaktır.

Sorgu Parametrelerini Güncellemek için React Router'ı Kullanma

Bir kullanıcı arama çubuğuna bir sorgu girdiğinde, bu sorguyu URL'de saklamanız gerekir. Örneğin, bir kullanıcı "tepki" kategorisindeki gönderiler için bir blog listesinde arama yaptıysa, güncellenen URL şöyle görünmelidir: /posts? etiket=tepki.

React, sorgu dizelerini okumanıza veya güncellemenize yardımcı olan useSearchParams kancasını sağlar.

Başlamak için App.js'de bir arama çubuğu oluşturun.

içe aktarmak { kullanımDevlet } itibaren"tepki";
ihracatvarsayılanişlevUygulama() {
sabit [sorgu, setquery] = useState('')
sabit tutamaçDeğiştir = (e) => {
setquery(e.hedef.değer)
 };
geri dönmek (
<div>
<biçimrol="aramak">
<girişonChange={handleChange}değer={sorgu}tip="aramak" />
biçim>
div>
 );
}

takip etmeyi unutma React kullanırken en iyi uygulamalar onlardan en iyi şekilde yararlanmak için.

Ardından, React router'ı kurun ve uygulamanıza yönlendirme ekleyin. Bu, useSearchParams kancasının çalışması için bir zorunluluktur.

içe aktarmak Tepki itibaren"tepki";
içe aktarmak ReactDOM itibaren"react-dom/client";
içe aktarmak"./index.css";
içe aktarmak Uygulama itibaren"./Uygulama";
içe aktarmak { TarayıcıYönlendirici, Rota, Rotalar } itibaren"tepki-yönlendirici-dom";
sabit kök = ReactDOM.createRoot(belge.getElementById("kök"));
kök.render(
<Tepki. Katı Mod>
<TarayıcıYönlendirici>
<Rotalar>
"/" eleman={} />
Rotalar>
TarayıcıYönlendirici>
Tepki. Katı Mod>
);

Artık kullanıcı yazarken handleChange() işlevini değiştirerek sorguları URL'ye kaydedebilirsiniz.

içe aktarmak { kullanımDevlet } itibaren"tepki";
içe aktarmak { useSearchParams } itibaren"tepki-yönlendirici-dom";
ihracatvarsayılanişlevUygulama() {
sabit [sorgu, setquery] = useState("");
sabit [searchParams, setSearchParams] = useSearchParams({});
sabit tutamaçDeğiştir = (e) => {
setSearchParams({ sorgu: e.hedef.değer });
setquery(e.hedef.değer);
 };
geri dönmek (
<div>
<biçimrol="aramak">
<girişonChange={handleChange}değer={sorgu}tip="aramak" />
biçim>
div>
 );
}

Sorgu Değerlerini URL'den Alma

searchParams.get() kullanarak ve sorgu parametresinin adını girerek tek bir sorgu değeri elde edebilirsiniz.

sabit [searchParams, setSearchParams] = useSearchParams({});
sabit değer = searchParams.get('etiket')

Tüm sorgu parametrelerini almak için searchParams.entries()'i kullanın.

sabit [searchParams, setSearchParams] = useSearchParams({});
sabit değerler = searchParams.entries()

Bu yöntem, anahtar/değer çiftlerini kullanarak yineleyebileceğiniz bir yineleyici döndürür.

için (sabit [anahtar, değer] ile ilgili değerler) {
konsol.kayıt(`${anahtar}, ${değer}`);
}

Anahtar/değer çiftleri, URL'de göründükleri sıradadır.

Arama Sonuçlarının Paylaşılabilirliğini Geliştirmek için Sorgu Parametrelerini Kullanın

useSearchParams kancası, arama değerlerini veya diğer verileri bir URL'de sorgu parametreleri olarak depolamak için harikadır.

Arama değerlerini useState kancasıyla da takip edebilirsiniz, ancak bunları bir sorgu parametresinde saklamak, insanların bunları URL yoluyla paylaşabileceği anlamına gelir.