时间戳

首页 > 解决方案 > 具有多个搜索参数的 React-Router 位置

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

标签： javascriptreactjsreact-router-dom

解决方案

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

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

推荐阅读