easy access to query params with react-router v4

with_query.js

// @flow

import * as React from 'react';
import queryString from 'query-string';
import { withRouter } from 'react-router-dom';

export default function withQuery(WrappedComponent: any): any {
  function QueryWrapper (props: Props) {
    const query = queryString.parse(props.location.search) || {};
    const pushQuery = (query) => {
      const { pathname } = props.location;
      props.history.push({
        pathname,
        search: queryString.stringify(query)
      });
    };

    const replaceQuery = (query) => {
      const { pathname } = props.location;
      props.history.replace({
        pathname,
        search: queryString.stringify(query)
      });
    };

    return (
      <WrappedComponent {...props} replaceQuery={replaceQuery} pushQuery={pushQuery} query={query} />
    );
  }

  return withRouter(QueryWrapper);
}