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

Question

通常我将这些函数用于第一个搜索参数。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

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

})

Answer 2

创建具有多个参数的字符串

history.push({

    pathname: props.location.pathname,

    search: "page=10&nice=yes"

})

Answer 3

目前，当您第二次推送时，您将以下查询参数添加?page=10到路径名x.com/title

pathname: props.location.pathname, ==> x.com/title

如果要添加新的查询参数，则必须使用 foreach on 检查是否有查询参数this.props.location.query，如果有，则将其添加到路径名

看起来像这样：

let currentPathname;

this.props.location.query.foreach(qparams => {

   currentPathname + qparams

});

history.push({

  pathname: this.currentPathname,

  search: "page=10"

})