Reactjs React-通过url进行筛选的最佳方式

我正在使用react路由器显示一组数据

在

/products

上，我得到了我所有产品的列表。如果我使用

/products？category=Women

，它将通过她们的类别过滤我的项目，如果我键入

/products？type=shirt

，它将根据她们的类型过滤（基本上，

/products？[target]=[query]

将按目标属性过滤

现在，我想相应地更改我的URL，如果我的用户单击“衬衫”类型按钮，这将替换我的URL以获取其

？type=Shirt

内容，同时仍然匹配以前的任何查询。如果我的URL已经包含查询，我不希望它被替换，而是将所有过滤器相加，以便

/products？type=Shirt&category=Women

仅为女性显示我的衬衫

---

解析我的URL是件轻而易举的事，我正在使用查询字符串来完成，但我不知道在添加新的过滤器时如何保留现有的过滤器。

您需要像这样扩展查询

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