在Reaction路由器中合并多个查询参数 [英] Concat multiple query param in react-router

问题描述

我正在使用react-router-dom5.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有自己的做法吗？

推荐答案

您可以使用query-string打包parsequeryParams成对象，这样您就可以轻松地编辑它们，然后在将它们传递到链接之前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)}} />

这篇关于在Reaction路由器中合并多个查询参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！