Ganti Query tanpa Refresh: Cara Update URL tanpa Reload Next Js

Ditulis oleh Next.js

Cara update URL tanpa reload di Next.js App Router adalah memakai router.replace() dari next/navigation di dalam Client Component. Pola yang paling sering terlewat adalah membaca pathname dan searchParams aktif dulu, lalu membangun ulang query dengan URLSearchParams agar parameter lain tidak hilang.

Gunakan replace untuk Update URL Tanpa Reload

router.push() menambah entri baru ke riwayat browser. router.replace() menimpa URL aktif sehingga tombol back tidak kembali ke filter lama. Untuk filter, tab, dan pagination, replace hampir selalu lebih tepat.

  1. Tandai komponen dengan "use client" karena hook navigasi hanya jalan di browser.
  2. Ambil pathname dengan usePathname() dan query aktif dengan useSearchParams().
  3. Salin query ke new URLSearchParams(searchParams.toString()), lalu ubah dengan set atau delete.
  4. Panggil router.replace(`${pathname}?${params.toString()}`).
"use client";
import { usePathname, useRouter, useSearchParams } from "next/navigation";

export default function FilterStatus() {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  function setStatus(status: string) {
    const params = new URLSearchParams(searchParams.toString());
    params.set("status", status);
    router.replace(`${pathname}?${params.toString()}`);
  }

  return <button onClick={() => setStatus("aktif")}>Aktif</button>;
}

BACA JUGA:

Pola Query untuk Filter, Tab, dan Pagination

Gunakan satu fungsi pembantu untuk mengubah satu parameter tanpa menghapus page, q, atau tab lain. Jangan menetapkan query secara manual memakai string karena rawan menghapus parameter yang masih dipakai.

  • useRouter: menyediakan push dan replace untuk navigasi client side.
  • usePathname: mengambil path aktif, misalnya /produk.
  • useSearchParams: membaca query aktif dalam keadaan read only.
  • URLSearchParams: API browser untuk menambah, mengubah, dan menghapus query secara aman.

Hindari window.location.href atau window.location.search untuk kebutuhan ini. Keduanya memicu reload penuh dan membuang state React.

Tabel Pilihan Update URL di App Router

Metode Efek ke URL Catatan
router.replace URL berubah tanpa reload Pilihan utama untuk filter dan tab
router.push URL berubah tanpa reload Pakai bila tiap filter perlu bisa di-back
window.location Reload penuh Hindari untuk navigasi antar state UI

Perubahan query tetap bisa membuat Server Component dirender ulang bila halaman membaca searchParams. Tambahkan opsi { scroll: false } pada replace bila halaman tidak boleh lompat ke atas setelah filter berubah.

FAQ

Apakah router.replace memicu reload halaman?

Tidak. Halaman berpindah secara client side tanpa reload penuh.

Bagaimana menghapus satu query tanpa reload?

Gunakan params.delete("status"), lalu panggil router.replace dengan sisa query.

Kapan memakai window.history.replaceState?

Hanya untuk URL kosmetik yang tidak perlu dibaca oleh Server Component atau logika routing Next.js.

Artikel Terkait