在反应路由器中连接多个查询参数[重复]
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>
【讨论】:
以上是关于在反应路由器中连接多个查询参数[重复]的主要内容,如果未能解决你的问题,请参考以下文章