Skip to main content

Query Parameter

Query parameter dapat digunakan untuk passing data antar halaman ataupun untuk memudahkan user dalam copy paster sebuah konten. sehingga page yang dikirimkan masih sama seperti user yang melakukan sharing

dan berikut beberapa method yang digunakan untuk mmanimulasi query

Get parameter pada react router dom v5​

import { useLocation } from "react-router-dom";
const { search } = useLocation();

const query = new URLSearchParams(search);
console.log(query.get("name_query_paramater"));

delete query parameter​

import { useLocation } from "react-router-dom";
const { search } = useLocation();

const query = new URLSearchParams(search);
query.delete("name_query_paramater");

Set query parameter​

import { useHistory } from "react-router-dom";
const history = useHistory();

history.replace({
  search: "?query=value",
});

alternative lain bisa menggunakan class new URLSearchParams

import { useLocation } from "react-router-dom";
const { search } = useLocation();

const query = new URLSearchParams(search);
query.set("name_query_paramater", "value_parameter");
import { useLocation } from "react-router-dom";
const { search } = useLocation();

const query = new URLSearchParams(search);
query.append("name_query_paramater", "value_parameter");

Query parameter react-router-dom v6​

untuk version 6 react-router-dom sudah dibekali dengan hook sendiri yaitu useSearchParams()

tip

Dilain kasus, kadang developer mau mendapatkan semua value dari query. untuk itu perlu menambahkan baris kode berikut

import { useLocation } from "react-router-dom";
const { search } = useLocation();

const query = new URLSearchParams(search);
let params = {};
for (let value of query.keys()) {
  params[value] = params.get(value);
}

dengan begini semua value query akan menjadi satu. atau bisa di buat menjadi kustom hook

Reference​

URL Search Params