Cara Memperbarui Parameter Kueri di React

Parameter kueri adalah pasangan nama/nilai yang dapat Anda tambahkan ke bagian akhir URL. Mereka memungkinkan Anda untuk menyimpan data di URL itu.

Salah satu aplikasi praktis parameter kueri adalah menyimpan nilai dari penelusuran pengguna.

Menggunakan React Router untuk Memperbarui Parameter Kueri

Saat pengguna memasukkan kueri ke bilah pencarian, Anda harus menyimpan kueri itu di URL. Misalnya, jika pengguna menelusuri daftar blog untuk posting dalam kategori "reaksi", URL yang diperbarui akan terlihat seperti ini: /posts? tag=reaksi.

React menyediakan hook useSearchParams yang membantu Anda membaca atau memperbarui string kueri.

Untuk memulai, buat bilah pencarian di App.js.

impor { status penggunaan } 

instagram viewer

dari"reaksi";
eksporbawaanfungsiAplikasi() {
const [permintaan, setquery] = useState('')
const handleChange = (e) => {
setquery(e.target.nilai)
 };
kembali (
<div>
<membentukperan="mencari">
<memasukkandalam perubahan={handleChange}nilai={pertanyaan}jenis="mencari" />
membentuk>
div>
 );
}

Ingatlah untuk mengikuti praktik terbaik saat menggunakan React untuk mendapatkan hasil maksimal dari mereka.

Selanjutnya, instal React router dan tambahkan perutean ke aplikasi Anda. Ini adalah keharusan agar hook useSearchParams berfungsi.

impor Reaksi dari"reaksi";
impor ReactDOM dari"reaksi-dom/klien";
impor"./index.css";
impor Aplikasi dari"./Aplikasi";
impor { BrowserRouter, Rute, Rute } dari"bereaksi-router-dom";
const root = ReactDOM.createRoot(dokumen.getElementById("akar"));
akar.memberikan(
<Reaksi. Mode Ketat>
<BrowserRouter>
<Rute>
"/" elemen={} />
Rute>
BrowserRouter>
Reaksi. Mode Ketat>
);

Sekarang Anda bisa menyimpan kueri di URL saat pengguna mengetik dengan memodifikasi fungsi handleChange() .

impor { status penggunaan } dari"reaksi";
impor { useSearchParams } dari"bereaksi-router-dom";
eksporbawaanfungsiAplikasi() {
const [permintaan, setquery] = useState("");
const [searchParams, setSearchParams] = useSearchParams({});
const handleChange = (e) => {
setSearchParams({ pertanyaan: e.target.nilai });
setquery(e.target.nilai);
 };
kembali (
<div>
<membentukperan="mencari">
<memasukkandalam perubahan={handleChange}nilai={pertanyaan}jenis="mencari" />
membentuk>
div>
 );
}

Mendapatkan Nilai Kueri Dari URL

Anda bisa mendapatkan satu nilai kueri menggunakan searchParams.get() dan meneruskan nama parameter kueri.

const [searchParams, setSearchParams] = useSearchParams({});
const nilai = searchParams.get('menandai')

Untuk mendapatkan semua parameter kueri, gunakan searchParams.entries().

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

Metode ini mengembalikan iterator yang dapat Anda iterasi menggunakan pasangan kunci/nilai.

untuk (const [kunci, nilai] dari nilai) {
menghibur.catatan(`${kunci}, ${nilai}`);
}

Pasangan kunci/nilai berada dalam urutan kemunculannya di URL.

Gunakan Parameter Kueri untuk Meningkatkan Kemampuan Berbagi Hasil Penelusuran

Kait useSearchParams sangat bagus untuk menyimpan nilai pencarian atau data lainnya sebagai parameter kueri di URL.

Anda juga dapat melacak nilai pencarian dengan hook useState, tetapi menyimpannya dalam parameter kueri berarti orang dapat membagikannya melalui URL.