Реагировать - Лучший способ фильтрации через URL

Question

Я использую реагирующий маршрутизатор для отображения массива данных.

При /products я получаю список всех своих продуктов.Если я использую /products?category=Women, он фильтрует мои предметы по их категории, а если я печатаю /products?type=shirt, он будет фильтровать по их типу (в основном, /products?[target]=[query] будет фильтровать по целевому атрибуту.

Теперь,Я бы хотел изменить свой URL соответствующим образом, если мой пользователь нажимает на кнопку типа «Рубашка», это заменит мой URL, чтобы получить его ?type=shirt, но при этом будет соответствовать любому предыдущему запросу. Если мой URL уже содержит запрос,Я не хочу, чтобы он был заменен, а скорее чтобы суммировать все фильтры, чтобы /products?type=shirt&category=Women отображал только мои рубашки для женщин.

Разбор моего URL - это просто, я использую строку запроса, чтобы сделатьтак, но я понятия не имею, как сохранить существующие фильтры при добавлении новых.

Answer 1

Вам нужно расширить ваши запросы, как

const query = queryString.parse(location.search);
const modifiedQuery = {
   ...query,
   {[target]: queryVal}
}
history.replace({
   pathname: location.pathname,
   search: queryString.stringify(modifiedQuery)
})