javascript - 具有多个搜索参数的React-Router位置

通常，我将这些功能用于第一个搜索参数。

history.push({
    pathname: props.location.pathname,
    search: "nice=yes"
})

在这些history.push链接之后，看起来像这样-> x.com/title?nice=yes

但是我无法添加更多搜索查询。当我尝试添加新密钥时，只会更改旧密钥。
例如，我的链接是x.com/title?nice=yes，当页面更改时我添加了第二个搜索，查询看起来像这样；

history.push({
    pathname: props.location.pathname,
    search: "page=10"
})

但它会更改第一个参数。

我想添加多个参数，例如：x.com/title?page=10&nice=yes

最佳答案

如果您有多个参数，则必须先将它们放在一个对象中：

const params = {
    page: 10,
    nice: "yes",
    size: 20,
    ...
}

然后使用此功能序列化它们：

const serialize = obj => Object.keys(obj)
                             .map(key => `${key}=${encodeURIComponent(obj[key])}`)
                             .join('&')

像这样 ：

history.push({
    pathname: history.location.pathname,
    search: serialize(params) // => search: 'page=10&nice=yes&size=20&...'
})