具有多个搜索参数的 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/titlepathname: 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"})