How to handle arrays in query params?

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

@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