如何只更改react中的特定查询参数

Question

假设我有这个url：/app/search?spaceId=**621cd16015**&resource_type=room&capacity=3

我只想根据点击更新spaceId，所以新的URL将是：/app/search?spaceId=**14235ad**&resource_type=room&capacity=3

我正在使用类组件。我使用以下代码更改了spaceId。它可以工作，但也可以删除所有其他参数。

this.props.history.push({
pathname: "/app/search",
search: `?spaceId=${event}`,
});

Answer 1

您可以使用URLSearchParams对象

const searchParams = new URLSearchParams('spaceId=spaceOldValue&resource_type=room&capacity=3');
searchParams.set('spaceId', 'spaceNewValue');
this.props.history.replace({
pathname: '/app/search',
search: searchParams.toString()
});