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

Question

I just migrated an app made with react and react-router from an old version 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.

alejandrodnm · Accepted Answer · 2016-04-30 19:29:13Z

9

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

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

edited Apr 30, 2016 at 19:29

answered Mar 13, 2016 at 22:55

alejandrodnm

5,6803 gold badges29 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David L. Walsh · Accepted Answer · 2016-03-07 23:35:21Z

1

I recommend the qs package.

import { stringify } from 'qs';

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

answered Mar 7, 2016 at 23:35

David L. Walsh

24.9k10 gold badges63 silver badges50 bronze badges

2 Comments

Ivan Ortega Over a year ago

Thanks David, but not found... :(

alejandrodnm Over a year ago

The qs package gives you the string url, but the thing is that react-router parses the url and returns a string instead of an Array in the query object.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related