Question

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

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

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

Multiple IDs with React Router

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

由于

Answer 1

React-router v4不再解析查询字符串，请参阅https://github.com/ReactTraining/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

也许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

React Router多个ids参数

2 个答案: