React-router强制查询字符串是一个包含单个元素的数组

Question

我只是用迁移做了应用react,并react-router从旧版本react 0.15和react-router 2.0

在旧版本Links中创建的地方如下:

<Link to='route-name' query={{ids: [1]}}>
  {name}
</Link>

这构建了一个网址/route/?ids[]=1.这会让我在组件中

this.props.query = {
  ids: ['1']
}

升级后,Link声明更改为:

<Link to={{pathname:`/route/`, query={ids: [1]}}}>
  {name}
</Link>

这产生了类似的URL /route/ids=1,现在路由器像这样解析查询字符串:

this.props.location.query = {
  ids : '1'
}

我设法获得数组的唯一方法是,如果链接声明中的数组有多个元素,尽管url在url中不使用空括号.

那么当只有一个元素时,有没有办法强制路由器使用数组,我不想每次检查我得到的是数组还是字符串.

Answer 1

如历史文档中所述,您需要使用自定义历史记录来解析查询字符串,就像您需要它一样.

React-router使用该query-string包进行解析和字符串化功能,快速浏览一下我认为它不支持您的用例的代码,幸运的是,该qs软件包只需设置一个选项即可完成.

你需要做这样的事情:

import { stringify, parse } from 'qs'
import { Router, useRouterHistory } from 'react-router'
import createBrowserHistory from 'history/lib/createBrowserHistory'

const stringifyQuery = query => stringify(query, { arrayFormat: 'brackets' })
const history = useRouterHistory(createBrowserHistory)({ parseQueryString: parse, stringifyQuery })

<Router history={history} />