React Router v4 ControlledRouter

ControlledRouter.js

// @flow

import React, { Component } from 'react'

import BrowserHistory from 'react-history/BrowserHistory'
import { Push } from 'react-history'
import { StaticRouter } from 'react-router'

/**
 * ControlledRouter, greatly inspired by https://gist.github.com/donnanicolas/3d76397a92551f449637590bf0413133
 * Usage:
 * <ControlledRouter location={location} setLocation={setLocation}>
 *  <App />
 * </ControlledRouter>
 */

type PropTypes = {
  location: Object,
  setLocation: Function,
  children?: React.Element<*>,
}

class ControlledRouter extends Component {
  props:  PropTypes

  prevPathname: string

  constructor(props: PropTypes) {
    super(props)

    this.prevPathname = ''
  }

  render() {
    const { location, setLocation, children } = this.props

    return (
      <BrowserHistory
        key={ location.pathname }
      >
        {({ history, action, location: historyLocation }) => {
          const historyPathname = historyLocation.pathname
          const controlledPathname = location.pathname
          const pathChanged = historyPathname !== controlledPathname
          const shouldUpdateState = pathChanged && historyPathname !== this.prevPathname
          const shouldUpdateHistory = pathChanged && !shouldUpdateState

          // Keep track of previous pathname
          this.prevPathname = historyLocation.pathname

          if (shouldUpdateState) {
            setTimeout(() => {
              setLocation(historyLocation)
            }, 0)
          }

          return (
            <StaticRouter
              action={action}
              location={historyLocation}
              onPush={history.push}
              onReplace={history.replace}
              blockTransitions={history.block}
            >
              { shouldUpdateHistory ? <Push path={location.pathname} /> : children }
            </StaticRouter>
          );
        }}
      </BrowserHistory>
    )
  }
}

ControlledRouter.displayName = 'ControlledRouter'

export default ControlledRouter

This is so close but cause issues. Specifically the setTimeout with setLocation inside. I get why you did it: React complains loudly when you update state during a render but this method has insidious effects. For example, a child component will sometimes unmount and then render…

Quick fix here: https://gist.github.com/jbraithwaite/4c4ecfbc8a09d63e83d86c6810e0ec77