reactjs - 在 react 路由器中连接多个查询参数

Question

这个问题在这里已经有了答案:





How do you programmatically update query params in react-router?

(11 个回答)


去年关闭。




我正在使用 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它有自己的做这些事情的方式吗？

Answer 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)}} />