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

Question

通常我使用这些函数作为第一个搜索参数。

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

在这些 history.push 链接之后看起来像这样 -> x.com/标题？nice=是

但我无法添加更多搜索查询。当我尝试添加新 key 时，仅旧 key 发生变化。 例如，我的链接是 x.com/title?nice=yes 并且我在页面更改时添加第二个搜索，查询如下所示；

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

但它改变了第一个参数。

我想添加多个参数，如下所示:x.com/title?page=10&nice=yes

Answer 1

如果你有多个参数，你必须先将它们放入一个对象中:

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&...'
})