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

Based on @Stedia's gist https://gist.github.com/steida/16da36887e6e6b466e12ba3a4ae6ce87

We haven't tested it, we will do it tomorrow and fix it if necessary.

The idea is to make a connected router that can dispatch actions when the route changes and can react to state changes

Usage with Redux:

const mapStateToProps = state => {
  pathname: state.router.pathname
}

const mapDispatchToProps = dispatch => {
  onChange: (action, pathname) => {
    dispatch({ type: 'LOCATION_CHANGED', action, pathname })
  }
}

connect(
  mapStateToProps,
  mapDispatchToProps,
)(ControlledRouter)

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