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
2
Answers
I can see three options:
params
somehow still returnsamenities
when converted to string (tryconsole.log(pathname + '?' + params)
right before navigation),Try changing
replace
topush
everywhere and definitely take a closer look at browsing history to see if you can find correct urls there.Try this