javascript - React-router 强制查询字符串为具有单个元素的数组

Question

我刚刚将使用 react 和 react-router 制作的应用程序从旧版本迁移到 react 0.15 和 react-router 2.0

在旧版本中，Links 是这样创建的:

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

这构造了一个 url，如 /route/?ids[]=1。那会给我组件

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

升级后 Link 声明更改为:

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

它生成类似 /route/ids=1 的 url，现在路由器像这样解析查询字符串:

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

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

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

Answer 1

如 history docs 中所述, 你需要使用 custom history它会像您需要的那样解析查询字符串。

React-router 将 query-string 包用于 parse 和 stringify 函数，快速浏览一下代码 我认为它不支持您的用例，幸运的是 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} />