Parameter & Query di URL - ReactJS

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

1. Kenalan dengan Parameter & Query di URL

Di dunia React, kita sering butuh mengambil data dari URL. Misalnya, saat membuka halaman produk dengan URL https://toko.com/product/123, angka 123 itu disebut URL parameter. Sedangkan jika formatnya seperti https://toko.com/search?q=sepatu, bagian q=sepatu disebut query parameter.

Jadi, kenapa kita butuh ini?

• Navigasi dinamis  – Misalnya, halaman detail produk yang berbeda untuk setiap ID.
• Filter dan pencarian  – Misalnya, menyaring daftar produk berdasarkan kategori tertentu.
• Berbagi link spesifik  – Misalnya, membagikan URL dengan filter yang sama ke orang lain.

Mari kita pelajari cara menggunakannya di React dengan React Router! 🚀

2. Menggunakan URL Parameter

URL parameter berguna untuk mengambil nilai langsung dari path URL. Kita gunakan React Router untuk menangani ini.

2.1. Setup React Router

Jika belum terpasang, install dulu:

npm install react-router-dom

2.2. Definisi Route dengan Parameter

Buat file Product.js untuk menangani halaman produk berdasarkan ID yang ada di URL:

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

const Product = () => {
  const { id } = useParams();
  return <h1>Detail Produk dengan ID: {id}</h1>;
};

export default Product;

Lalu, di App.js, tambahkan route yang menangani parameter ini:

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Product from "./Product";

const App = () => {
  return (
    <Router>
      <nav>
        <Link to="/product/1">Produk 1</Link> | <Link to="/product/2">Produk 2</Link>
      </nav>
      <Routes>
        <Route path="/product/:id" element={<Product />} />
      </Routes>
    </Router>
  );
};

export default App;

Sekarang, jika kamu membuka /product/1, React akan menampilkan ID produk sesuai dengan URL yang dikunjungi!

3. Menggunakan Query Parameter

Query parameter lebih fleksibel untuk pencarian dan filter data. Kita bisa mengambilnya menggunakan useSearchParams dari React Router.

3.1. Buat Halaman Pencarian

Buat file Search.js untuk mengambil nilai query parameter:

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

const Search = () => {
  const [searchParams] = useSearchParams();
  const query = searchParams.get("q");
  return <h1>Hasil Pencarian untuk: {query}</h1>;
};

export default Search;

3.2. Tambahkan Route di App.js

Tambahkan halaman pencarian dalam App.js:

import Search from "./Search";

const App = () => {
  return (
    <Router>
      <nav>
        <Link to="/search?q=react">Cari React</Link> |
        <Link to="/search?q=vue">Cari Vue</Link>
      </nav>
      <Routes>
        <Route path="/search" element={<Search />} />
      </Routes>
    </Router>
  );
};

Sekarang, jika kamu membuka /search?q=react, React akan menampilkan teks Hasil Pencarian untuk: react!

4. Kesimpulan

 URL Parameter cocok untuk data spesifik seperti ID produk.  Query Parameter cocok untuk pencarian dan filter.  useParams digunakan untuk membaca parameter di path.  useSearchParams digunakan untuk membaca query parameter di URL.

Dengan teknik ini, kita bisa membuat navigasi dinamis yang lebih fleksibel dan user-friendly!