A Contoller ReactRouter for v4

ControllerRouter.js

/* @flow */
import BrowserHistory from 'react-history/BrowserHistory'
import {Push, Replace} from 'react-history'
import React, {Component} from 'react'
import {StaticRouter} from 'react-router'

type RouterProps = {
  onChange: (action: string, location: Object) => void,
  pathname: string,
  navigation?: 'PUSH' | 'REPLACE',
};

/**
 * A router that exposes ways to connect to store such as Redux
 */
class ControlledRouter extends Component {
  props: RouterProps

  static defaultProps: {
    navigation: string
  }

  render() {
    const { navigation, pathname, onChange } = this.props
    return (
      <BrowserHistory key={pathname} > // github.com/yahoo/react-intl/issues/234#issuecomment-163366518
        {({ history, action, location }) => {
          const pathnameChanged = location.pathname !== pathname

          if (pathnameChanged) {
            setImmediate(() => onChange(action, location))
          }

          return (
            <StaticRouter
              action={action}
              location={location}
              onPush={history.push}
              onReplace={history.replace}
              blockTransitions={history.block}
              >
              {pathnameChanged && navigation === 'PUSH' &&
                <Push path={pathname}/>
              }
              {pathnameChanged && navigation === 'REPLACE' &&
                <Replace path={pathname}/>
              }
            </StaticRouter>
          )
        } }
      </BrowserHistory>
    )
  }
}

ControlledRouter.defaultProps = {
  navigation: 'PUSH'
}

export default ControlledRouter

The BACK, FORWARD and POP actions need internal state to avoid infinite history changes