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>

产生 urls 像 /route/ids=1，现在路由器像这样解析查询字符串：

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

如果 link 声明中的数组有多个元素，我设法获得一个数组的唯一方法，尽管 url 在 url.

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

Answer 1

我推荐qs包。

import { stringify } from 'qs';

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

Answer 2

如 history docs, you need to use a custom history 中所述，可根据需要解析查询字符串。

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} />

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

React-router force querystring to be an array with a single element

javascript

reactjs

react-router