Geek Answers Handbook

React-router force querystring - single element array

I just moved the application from reactand react-routerfrom the old version to react 0.15andreact-router 2.0

In the old version Links, created as follows:

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

It built a url like /route/?ids[]=1. This will give me a component

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

After the update, the announcement Linkwas changed to:

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

Which creates URLs, such as /route/ids=1, now the router parses the request:

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

The only way I managed to get the array is if the array in the link declaration has more than one element, although the URL does not use empty brackets in the URL.

, , , , , , .

+4
2

, custom , , .

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

qs .

import { stringify } from 'qs';

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

More articles:


All Articles