在反应路由器中连接多个查询参数

Question

我正在使用react-router-domv 5.2.0。我想在 URL 中添加多个查询参数，但我不确定如何完成它。我的路线是这样的：

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

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

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

目前我正在手动进行，例如...

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

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

Answer 1

您可以使用query-string包将参数parse查询到对象中，这将允许您轻松编辑它们，然后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)}} />