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>

哪个会生成像/route/ids=1这样的网址，现在路由器会像这样解析查询字符串：

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

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

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

Answer 1

如history docs中所述，您需要使用custom history来解析您需要的查询字符串。

React-router使用sudo包进行解析和字符串化功能，快速浏览一下我认为它不支持你的用例的代码，幸运的是query-string包做了它只需设置一个选项。

你需要做这样的事情：

qs

Answer 2

我推荐qs包。

import { stringify } from 'qs';

var queryStr = stringify({ ids: [21] }, { encode: false });