У меня есть проект Next.js, где пользователи могут загружать свойства и применять различные фильтры, такие как удобства, minPrice, maxPrice и т. д.
Я создал специальный крючок для сброса определенных параметров запроса, когда пользователь нажимает кнопку «Сбросить фильтр». Однако после сброса фильтров некоторые параметры по-прежнему отображаются в URL-адресе, хотя в журналах указано, что они были удалены. Вот мой код
'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.info('************** propertyType **************');
console.info('############# BEFORE DELETE ################');
console.info(params.get('propertyType'));
params.delete('propertyType');
console.info('############# AFTER DELETE ################');
console.info(params.get('propertyType'));
console.info('************** amenities **************');
console.info('############# BEFORE DELETE ################');
console.info(params.get('amenities'));
params.delete('amenities');
console.info('############# AFTER DELETE ################');
console.info(params.get('amenities'));
router.replace(pathname + '?' + params);
// onClose();
};
return {
handleResetFilter,
};
}
Предположим, что исходный URL-адрес:
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+Йоханнесбург+Юг %2C+Юг+Африка&amenities=на открытом воздухе+пространство%2Cсушилка%2Домашние животные+разрешены%2Прачечная+в+здании%2Cмеблирована%2Cкрытая+парковка%2Лифт%2Стиральная машина%2Печь&propertyType=квартира%2Дом%2CТаунхаус
При выполнении функции сброса фильтра журналы показывают, что параметры propertyType и удобств удалены правильно:
**************Тип недвижимости **************
############# ПЕРЕД УДАЛЕНИЕМ ################
квартира, дом, таунхаус
############# ПОСЛЕ УДАЛЕНИЯ ################
нулевой
************** удобства **************
############# ПЕРЕД УДАЛЕНИЕМ ################
открытая площадка, сушилка, домашние животные разрешены, прачечная в здании, с мебелью, крытая парковка, лифт, стиральная машина, плита
############# ПОСЛЕ УДАЛЕНИЯ ################
нулевой
однако после выполнения функции URL-адрес все еще содержит параметр удобств:
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+Йоханнесбург+Юг %2C+Юг+Африка&amenities=на открытом воздухе+пространство%2Cсушилка%2Домашние животные+разрешены%2Прачечная+в+здании%2Cмеблирована%2Cкрытая+парковка%2Лифт%2Стиральная машина%2Печь





Я вижу три варианта:
params каким-то образом всё равно возвращает amenities при преобразовании в строку (попробуйте console.info(pathname + '?' + params) прямо перед навигацией),Попробуйте изменить replace на push везде и обязательно внимательно просмотрите историю посещений, чтобы увидеть, сможете ли вы найти там правильные URL-адреса.
Попробуй это
const [searchParams, setSearchParams] = useSearchParams();
setSearchParams({});
Вы правы. Проблема была связана с логикой навигации, записанной в другом фильтре сброса.