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

Posted

技术标签:

【中文标题】在反应路由器中连接多个查询参数[重复]【英文标题】: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。 【参考方案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>

【讨论】:

以上是关于在反应路由器中连接多个查询参数[重复]的主要内容,如果未能解决你的问题,请参考以下文章

如何从 URL 中隐藏反应路由器参数和查询字符串

反应路由器查询参数字符串加载默认页面'/'

ReactJS - 使用查询参数获取路由

在反应路由器中维护websocket连接

反应路由器/反应查询不会取消/发出导航请求 - 反应/打字稿

如何在反应路由器dom v4中获取组件中的参数?