Cara Menghapus Query Parameter Next Js saat Filter Dibersihkan

Ditulis oleh Next.js

Cara menghapus query parameter Next.js yang paling aman di App Router adalah membaca URL aktif lalu menulis ulang dengan router.replace dari Client Component. Kamu tidak menghapus dari Server Component karena searchParams di sana hanya untuk dibaca. Untuk filter yang dibersihkan, salin query ke URLSearchParams, panggil .delete("namakey"), lalu replace ke pathname baru.

Hapus Query Parameter Lewat Client Component

Kesalahan paling umum adalah memutasi hasil useSearchParams() langsung. Objek itu read-only. Kamu harus menyalinnya dulu.

Ikuti urutan ini untuk hapus satu filter tanpa menghilangkan filter lain:

1. Tandai komponen dengan "use client".
2. Ambil pathname = usePathname(), searchParams = useSearchParams(), dan router = useRouter().
3. Buat salinan: const params = new URLSearchParams(searchParams.toString()).
4. Hapus key target: params.delete("kategori").
5. Tulis ulang URL: router.replace(`${pathname}?${params.toString()}`, { scroll: false }).

"use client";
import { usePathname, useRouter, useSearchParams } from "next/navigation";

function clearKategori() {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const router = useRouter();
  const params = new URLSearchParams(searchParams.toString());
  params.delete("kategori");
  const query = params.toString();
  router.replace(query ? `${pathname}?${query}` : pathname, { scroll: false });
}
  • Pakai replace untuk reset filter supaya tombol back tidak terjebak di riwayat filter lama.
  • Pakai push hanya bila perubahan filter perlu bisa di-undo dengan back browser.
  • Tambahkan { scroll: false } supaya daftar produk tidak lompat ke atas setiap filter berubah.

BACA JUGA:

Tabel Pilihan Teknik Hapus Query

Kondisi Teknik Catatan App Router
Hapus satu param Salin params lalu delete(key) Key lain seperti q dan sort tetap aman
Hapus semua param router.replace(pathname) Jangan sertakan ? kosong di akhir URL
Reset filter plus pagination delete filter dan delete("page") Hindari user bertahan di halaman 5 yang sudah kosong

Server Component menerima searchParams sebagai prop untuk fetch data. Ia tidak punya router untuk mengubah URL browser.

Hapus Semua Query dan Redirect Bersih

Tombol Reset Semua cukup replace ke pathname tanpa query string.

router.replace(pathname, { scroll: false });

Gunakan redirect(pathname) dari next/navigation di Server Component atau Server Action bila reset harus terjadi sebelum render, misalnya setelah form filter submit ke server.

  • Jangan panggil searchParams.delete() langsung tanpa new URLSearchParams.
  • Jangan membangun query manual dengan string concatenation karena karakter spasi dan & rusak.
  • Selalu cek params.toString() kosong sebelum menambah tanda ?.

FAQ

Apakah hapus query perlu use client?

Ya, karena useRouter, usePathname, dan useSearchParams hanya berjalan di Client Component.

Kenapa URL lama masih muncul setelah delete?

Biasanya kamu lupa memanggil router.replace setelah delete, atau memakai objek params lama yang tidak disalin.

Bagaimana hapus query tanpa reload penuh?

Gunakan router.replace dari next/navigation karena ia navigasi client-side tanpa reload penuh.

Artikel Terkait