Managing component state in the URL with react-router

example.js

import React from 'react';
import withUrlState from './with-url-state';

function Example({urlState, setUrlState}) {
  const {count} = urlState;
  return <button onClick={() => setUrlState({count: count + 1})}>{count}</button>;
}

export default withUrlState({count: 0})(Example);

with-url-state.js

import React, {Component} from 'react';
import {withRouter} from 'react-router-dom';
import queryString from 'query-string';

function withUrlState(initialState = {}) {
  return C => withRouter(class WithUrlState extends Component {
    static displayName = `withUrlState(${C.displayName || C.name})`;

    // Callbacks to invoke when the URL changes.
    listeners = [];

    componentDidUpdate(prevProps) {
      const {location: {search}} = this.props;

      if (prevProps.location.search !== search) {
        this.listeners.forEach(f => f(this.getUrlState()));
      }
    }

    handleSetUrlState = (nextUrlState, method = 'replace') => {
      const {history, location} = this.props;
      const currentUrlState = queryString.parse(location.search);
      const nextQueryString = {
        ...currentUrlState,
        ...(typeof nextUrlState === 'function' ? nextUrlState(currentUrlState) : nextUrlState)
      };

      history[method](`?${queryString.stringify(nextQueryString)}`);
    };

    getUrlState = () => {
      const {location} = this.props;
      
      return {
        ...initialState,
        ...queryString.parse(location.search)
      };
    }

    handleUrlStateChange = f => {
      this.listeners.push(f);
    }

    render() {
      return (
        <C
          {...this.props}
          urlState={this.getUrlState()}
          setUrlState={this.handleSetUrlState}
          onUrlStateChange={this.handleUrlStateChange}
        />
      );
    }
  });
}

export default withUrlState;