How to handle arrays in query params?

[volkanunsal]

Currently when I update the route from the client using an array value, it returns the following

/search?current_use='family'&current_use='other'

I have been wondering how to use arrays in the query params with react-router, as in:

/search?current_use[]='family'&current_use[]='other'

[alejandrodnm]

Hello,

I'm migrating an app made with old versions of react and react-router to react 0.15 and react-router 2.0

In the old version the Links where created like this:

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

This constructed a url like /route/?ids[]=1. That would give me in the component

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

After the upgrade the Link declaration was changed to:

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

Which produces urls like /route/ids=1, now the Router parses the querystring like this:

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

The only way I've managed to get an array if is the array in the link declaration has more than one element, although the url doesn't use empty brackets in the url.

So is there a way to force the router to use an array when there is only a single element, I don't want to have to check every time if what I'm getting is an array or a string.

[ryanflorence]

you can create a custom history, we should probably add an entry to the upgrading guide around here somewhere: https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#using-custom-histories

I think you can just do:

const history = userRouterHistory(createBrowserHistory)({ parseQuery, stringifyQuery })

Where parseQuery and stringifyQuery are functions that implement the behavior you want.

[alejandrodnm]

Thx @ryanflorence I'll try that.

[iamrandys]

I've run into the same issue after upgrading. An array is only returned if there is more than one element. If there is only one element, then it converts it to a string. I would think that everyone would want to keep the old behavior of maintaining the original data type and always return an array.

@alejandrodnm Any luck with the custom history? I would really like to just use a standard history and not have something custom to get around this issue.

[alejandrodnm]

Hi @iamrandys I solved it with the custom history, it's really simple, I posted the answer in this SO question.

I'm copy pasting the answer here also, I hope it helps you:

As described in the history docs, you need to use a custom history that parses the querystrings like you need.

React-router uses the query-string package for the parse and stringify functions, doing a quick glance of the code I don't think it supports your use case, fortunately the qs package does it with just setting an options.

You'll need to do something like this:

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

[evgenTraytyak]

@alejandrodnm you also need to add { encode: false } to stringify second argument.

const stringifyQuery = query => stringify(query, { arrayFormat: 'brackets', encode: false })

for more explicit view in url param%5B%5D=1&param%5B%5D=10 => param[]=1&param[]=10