React - 通过网址

Question

我正在使用react-router来显示数据数组。

在/products上，我会获得所有产品的清单。如果我使用/products?category=Women，则会根据其类别过滤我的商品，如果我输入/products?type=shirt，则会根据其类型进行过滤（基本上，/products?[target]=[query]将按目标属性进行过滤。

现在，我想相应地更改我的网址，如果我的用户点击“衬衫”类型按钮，这将取代我的网址以获取其?type=shirt内容，同时仍然匹配任何先前的查询。如果我的网址已包含查询，我不希望将其替换，而是将所有过滤器相加，以便/products?type=shirt&category=Women仅显示我的女性衬衫。

解析我的网址是轻而易举的，我正在使用查询字符串来执行此操作，但我不知道在添加新网址时如何保留现有的网址。

Answer 1

您需要扩展您的查询，例如

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