我刚刚将使用 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 中使用空括号。
那么有没有办法在只有一个元素时强制路由器使用数组,我不想每次都检查我得到的是数组还是字符串。
最佳答案
如 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} />
关于javascript - React-router 强制查询字符串为具有单个元素的数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35851977/