在反应路由器中连接多个查询参数[重复]答案

【问题标题】：Concat multiple query param in react-router [duplicate]在反应路由器中连接多个查询参数[重复]
【发布时间】：2020-09-11 09:44:07
【问题描述】：

我正在使用react-router-dom v 5.2.0。我想在 URL 中添加多个查询参数，但我不知道如何完成它。我的路线如下所示：

<Route path="/admin/users" component={UserList} />

我想传递多个查询参数，例如...

/admin/users?search=hello&page=1&user_role=admin

目前我正在手动操作...

<Link to="/admin/users?user_role=admin" />

但是，通过这个手动操作，我无法连接多个查询参数。有没有办法动态连接查询参数？ react-router-dom 是否有自己的方式来做这些事情？

【问题讨论】：

是的，谢谢@SMAKSS。

标签： reactjs react-router react-router-dom

【解决方案1】：

您可以使用query-string 包到parse queryParams 到对象中，这将允许您轻松编辑它们，然后在将它们传递给链接之前stringify 它们。

import qs from 'query-string';

...
const queryParam = qs.parse(location.search);
const newQueryParam = {
   ...queryParam,
   user_role: 'admin',
   something_else: 'something',
}


...
<Link to={{ pathname: '/admin/users', search: qs.stringify(newQueryParam)}} />

【讨论】：

这也有效。谢谢！
很高兴能提供帮助。我只是觉得它比 URLSearchParams 方便一点
是的，我在使用这两种解决方案后也有同样的感觉。为方便起见，我接受了您的回答。

【解决方案2】：

答案在 SMAKSS 提供的链接上。诀窍是将set key value 对与URLSearchParams 配对。

  const addQuery = (key, value) => {
    let pathname = location.pathname;
    // returns path: '/app/books'
    let searchParams = new URLSearchParams(location.search);
    // returns the existing query string: '?type=fiction&author=fahid'
    searchParams.set(key, value);
    history.push({
      pathname: pathname,
      search: searchParams.toString()
    });
  };

...然后你可以这样使用...

<button onClick={() => addQuery("page", 2)>Page 2</button>

【讨论】：