React Router中如何连接多个查询参数

Question

我正在使用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 是否有自己的解决方案？

- Abeid Ahmed

---

是的，谢谢 @SMAKSS。 - Abeid Ahmed

Answer 1

你可以使用query-string包将查询参数解析为对象，从而方便地编辑它们，然后在传递给链接之前对它们进行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)}} />

- Shubham Khatri

---

这个也可以。谢谢！ - Abeid Ahmed

很高兴能够帮助。我只是觉得它比URLSearchParams更方便一些。 - Shubham Khatri

是的，我在使用这两种解决方案后也有同样的感觉。由于方便，我接受了你的答案。 - Abeid Ahmed

Answer 2

答案在SMAKSS提供的链接中。诀窍是将键值对设置为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>

- Abeid Ahmed