history.listen not triggered in componentDidMount

Question

I am using react-router v4 for routing, to parse query params, it has been recommended to use history.listen here

I am calling it within the lifecycle hook componentDidMount to ensure that the component has mounted so that I can provide it as a piece of component state using a Higher Order Component like this:

import createHistory from 'history/createBrowserHistory';
import qs from 'qs';
import { compose, lifecycle, withState } from 'recompose';

export const history = createHistory();
const withQs = compose(
  withState('search', 'setSearch', {}),
  lifecycle({
    componentDidMount: function () {
      // works on the client side
      history.listen(() => {
        // history.location = Object.assign(history.location,
          // parse the search string using your package of choice
        // { query: parseQueryString(history.location.search) }
        // )
        console.log('History Location', history.location);
        console.log('Search', history.location.search);
      })
    }
  })
)

export default withQs

The history.listen is never triggered when a route navigates to the new page or a new query param is added to the page.

Answer 1

Per the React Router V4 docs , if you want to manage history yourself, you need to use <Router> instead of <BrowserRouter> :

import { Router } from 'react-router'
import createBrowserHistory from 'history/createBrowserHistory'

const history = createBrowserHistory()

<Router history={history}>
  <App/>
</Router>