Next js useSearchParams, usePathname and useRouter issue

Question

I have a Next.js project where users can upload properties and apply various filters such as amenities, minPrice, maxPrice, etc.

I created a custom hook to reset specific query parameters when the user clicks a "Reset Filter" button. However, after resetting the filters, some parameters still appear in the URL even though the logs indicate they have been deleted. Here s my code

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

export function useFilterReset(onClose: () => void) {
  const pathname = usePathname();
  const router = useRouter();
  const searchParams = useSearchParams();

  const handleResetFilter = () => {
    const params = new URLSearchParams(searchParams.toString());
    params.delete('minPrice');
    params.delete('maxPrice');
    console.log('************** propertyType **************');
    console.log('############# BEFORE DELETE ################');
    console.log(params.get('propertyType'));
    params.delete('propertyType');
    console.log('############# AFTER DELETE ################');
    console.log(params.get('propertyType'));

    console.log('************** amenities **************');
    console.log('############# BEFORE DELETE ################');
    console.log(params.get('amenities'));
    params.delete('amenities');
    console.log('############# AFTER DELETE ################');
    console.log(params.get('amenities'));
    router.replace(pathname + '?' + params);
    // onClose();
  };

  return {
    handleResetFilter,
  };
}

Suppose the initial URL is:

http://localhost:3000/properties/map?lat=-26.2476095&lng=28.0873945&neLat=-26.24251187946654&neLng=28.09495803486075&swLat=-26.25713408434988&swLng=28.08018899408635&keywords=india&radios=&placeId=ChIJmeflRr8PlR4RWvO2jWjKfwE&address=South+Hills%2C+Johannesburg+South%2C+South+Africa&amenities=outdoor+space%2Cdryer%2Cpets+allowed%2Claundry+in+building%2Cfurnished%2Ccovered+parking%2Celevator%2Cwasher%2Cstove&propertyType=apartment%2Chouse%2Ctownhouse

Upon executing the reset filter function, the logs indicate that the propertyType and amenities parameters are deleted correctly:

**************** propertyType **************

############# BEFORE DELETE ################

apartment,house,townhouse

############# AFTER DELETE ################

null

************** amenities **************

############# BEFORE DELETE ################

outdoor space,dryer,pets allowed,laundry in building,furnished,covered parking,elevator,washer,stove

############# AFTER DELETE ################

null

owever, after the function executes, the URL still contains the amenities parameter:

http://localhost:3000/properties/map?lat=-26.2476095&lng=28.0873945&neLat=-26.24251187946654&neLng=28.09495803486075&swLat=-26.25713408434988&swLng=28.08018899408635&keywords=india&radios=&placeId=ChIJmeflRr8PlR4RWvO2jWjKfwE&address=South+Hills%2C+Johannesburg+South%2C+South+Africa&amenities=outdoor+space%2Cdryer%2Cpets+allowed%2Claundry+in+building%2Cfurnished%2Ccovered+parking%2Celevator%2Cwasher%2Cstove

Answer 1

I can see three options:

• either params somehow still returns amenities when converted to string (try console.log(pathname + '?' + params) right before navigation),
• or perhaps you perform some other navigation somewhere else,
• or the navigation plays some magic tricks on you...

Try changing replace to push everywhere and definitely take a closer look at browsing history to see if you can find correct urls there.