qhistory

Q History

Add query object support to history library location objects.

You will need to supply stringify and parse methods.

stringify

A function that takes a query object and returns a search string.

stringify({ occupation: 'computer' }) // 'occupation=computer'

parse

A function that takes a search string and returns a query object.

parse('stopDownloading=true') // { stopDownloading: 'true' }

There are lots of different query string packages that you can choose from. Some popular ones include:

• qs
• query-string
• querystring

There may be subtle differences in the way that each parses and stringifies, so you will need to determine which supports the features that you want.

Installation

npm install --save qhistory

Usage

import { createBrowserHistory } from 'history'
import qhistory from 'qhistory'

import { stringify, parse } from 'qs'

const history = qhistory(
  createBrowserHistory({ /* history configuration options */ }),
  stringify,
  parse
)

Usage with React Router

This can be used with React Router v4 to add query string support to location objects. If a location object has both a search string and a query object, the search string's value will be overwritten by the stringified query object.

import { Router } from 'react-router-dom'
import { createBrowserHistory } from 'history'
import qhistory from 'qhistory'

import { stringify, parse } from 'qs'

const history = qhistory(
  createBrowserHistory({ /* history configuration options */ }),
  stringify,
  parse
)

render((
  <Router history={history}>
    <App />
  </Router>
), document.getElementById('root'))