Diselesaikan: dapatkan kueri dari url react router dom v6

Masalah utama terkait mendapatkan kueri dari URL React Router DOM v6 adalah tidak menyediakan cara bawaan untuk mengakses parameter kueri. Sebagai gantinya, pengembang harus mengurai string URL secara manual dan mengekstrak sendiri parameter kueri. Ini bisa menjadi proses yang membosankan dan dapat menyebabkan kesalahan jika tidak dilakukan dengan benar. Selain itu, jika struktur URL berubah, kode mungkin perlu diperbarui.

import { useLocation } from "react-router-dom";

const MyComponent = () => {
  const location = useLocation();

  const queryParams = new URLSearchParams(location.search);

  return (
    <div>
      <h1>My Component</h1>
      <p>Query Param: {queryParams.get("myParam")}</p>
    </div>
  );  
};

1. "impor {useLocation} dari 'react-router-dom';" – Baris ini mengimpor kait useLocation dari pustaka react-router-dom.
2. “const MyComponent = () => {” – Baris ini mendeklarasikan fungsi bernama MyComponent yang akan mengembalikan komponen React.
3. "konst lokasi = useLocation();" – Baris ini menggunakan kait useLocation yang diimpor untuk mendapatkan informasi tentang lokasi aplikasi saat ini (misalnya, URL).
4. "const queryParams = new URLSearchParams(location.search);" – Baris ini membuat objek yang berisi semua parameter kueri di URL saat ini (misalnya, ?myParam=foo).
5. Kode lainnya hanya mengembalikan komponen React dengan tag h1 dan p yang menampilkan nilai myParam di string kueri URL (jika ada).

Bereaksi router Dom

React Router DOM adalah pustaka perutean untuk React yang memungkinkan pengembang membuat dan mengelola rute dalam aplikasi React mereka. Ini menyediakan API untuk menavigasi aplikasi, memungkinkan pengembang untuk menentukan rute secara deklaratif, merender komponen berdasarkan URL saat ini, dan menautkan antara berbagai bagian aplikasi. Ini juga mendukung fitur seperti pencocokan rute dinamis, pelacakan lokasi, dan penjaga navigasi.

Bagaimana cara mendapatkan string kueri di router react v6

v6

Di React Router v6, Anda dapat mengakses parameter string kueri menggunakan hook useLocation. Pengait ini mengembalikan objek lokasi yang berisi informasi tentang URL saat ini termasuk nama jalur, pencarian, hash, dan properti negara. Properti pencarian berisi parameter string kueri sebagai string. Anda kemudian dapat menguraikan string ini untuk mendapatkan objek yang berisi semua parameter string kueri.
Sebagai contoh:
const {pencarian} = useLocation();
const params = URLSearchParams baru(pencarian);
const param1 = params.get('param1');