React路由器多个IDS参数

Question

我正在尝试以相同名称处理React路由器中的多个参数，我以相同的名字来解释我，我有一个页面，我有一个通过ID进行比较的页面项目，例如，在查询字符串中，我有一个数组：

 &resourceid[]=123&resourceid[]=456...

因此，这样我就可以拥有n-Resourceid值。我该如何在React路由器中实现类似的目标？我找到了这个答案：

带有React路由器的多个ID

，但它可以用特定数量的ID和多个名称(例如/compare/:id1/:id2/:id3....(绑定我我不知道我可以拥有多少个项目，所以我想要一些更弹性的东西，例如上面的查询字符串阵列示例。有什么想法吗？

谢谢

Answer 1

react-router v4不再解析查询字符串，请参见https://github.com/reaecttraining/react-router/issues/4410。您可以使用query-string软件包自己完成。在Mount＆amp;接收道具，或在包装器组件中进行操作：

import * as qs from 'query-string';
const Wrapper = (props) => {
  const parsedQueryParams = qs.parse(props.location.search, {arrayFormat: 'bracket'});
  return <YourComponent {...props} resourceid={parsedQueryParams.resourceid}/>;
};

Answer 2

也许自定义史将有能力：

import { stringify, parse } from 'qs'
import { Router, useRouterHistory } from 'react-router'
import createBrowserHistory from 'history/lib/createBrowserHistory'
const stringifyQuery = query => stringify(query, { arrayFormat: 'brackets', encode: false })
const history = useRouterHistory(createBrowserHistory)({ parseQueryString: parse, stringifyQuery })
<Router history={history} />

检查此问题是否进行讨论：https：//github.com/reacttraining/reaect-router/issues/939