React Router多个ids参数

Posted 2021-04-16

我正在尝试使用相同的名称处理反应路由器中的多个参数，我做了一个示例来更好地解释我，我有一个页面，我通过项目的ID比较一些项目，所以例如在查询字符串中我有一个数组：

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

所以这样我可以有n-resourceid值。如何在反应路由器中实现类似的功能？我找到了这个答案：

Multiple IDs with React Router

但它绑定了我特定数量的ID和多个不同的名称，例如/compare/:id1/:id2/:id3....我不知道我可以拥有多少项，所以我想要一些像上面的查询字符串数组示例更具弹性的东西。任何的想法？

谢谢

答案

React-router v4不再解析查询字符串，请参阅https://github.com/ReactTraining/react-router/issues/4410。你可以用query-string包自己做。要么解析mount和receive props上的查询，要么在包装器组件中进行解析，如下所示：

import * as qs from 'query-string';

const Wrapper = (props) => {
  const parsedQueryParams = qs.parse(props.location.search, {arrayFormat: 'bracket'});
  return <YourComponent {...props} resourceid={parsedQueryParams.resourceid}/>;
};

另一答案

也许customHistory会做的伎俩：

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/react-router/issues/939