title: Cannot get react-router to work after upgrade
body: <p>I have been working on upgrading our app from React.js 0.13 to 15.4.2 and the dependencies surrounding it. I might be close, but after 50 hours over 4 days, I am at the end, my last hope.</p>
  
  <p>In the upgrade the react-router is upgraded to version 4.0.0 and every documentation and tutorial and stack over flow question showing how to write the router (all the same so must be correct) however, when I do it that way it always fails. Either saying history is a required attribute, or when I add it via the samples it still comes up as undefined and an error.</p>
  
  <p>Here is our index.js with the router.</p>
  
  <p>Can anyone see where I am not getting it correct? Thanks</p>
  
  <p>import React from 'react';</p>
  
  <pre><code>// material ui
  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
  import Theme from './styles/theme.js';
  
  import Header from './components/header.jsx';
  import Home from './views/home.jsx';
  
  import CaseController from 'controllers/caseController';
  import LoginController from 'controllers/loginController';
  import XController from 'controllers/xController';
  import PredefinedSearchAssetCasesController from 'controllers/predefinedSearchAssetCasesController';
  import PredefinedSearchCaseLabelsController from 'controllers/predefinedSearchCaseLabelsController';
  import DeepSearchController from 'controllers/deepSearchController';
  import NamesAndAddressController from 'controllers/namesAndAddressController';
  import AccountListing from 'controllers/accountListingController';
  
  import LoginStore from 'stores/loginStore';
  import LoginActions from 'actions/loginActions';
  import UtcStore from 'stores/utcStore';
  import UtcActions from 'actions/utcActions';
  
  import ErrorHandler from 'components/errorHandler';
  import DialogMessageHandler from 'components/dialogMessageHandler';
  import ConfirmationDialogHandler from 'components/confirmationDialogHandler';
  
  // routing related
  import { render } from 'react-dom';
  import { Router, Route, DefaultRoute, Link, hashHistory, browserHistory } from 'react-router';
  
  import versionNumber from 'raw-loader!../.version';
  
  var App = React.createClass ({
  
    childContextTypes: {
      muiTheme: React.PropTypes.object
    },
  
    getChildContext() {
      return {
        muiTheme: MuiThemeProvider.get()
      };
    },
  
    componentWillMount() {
      //ThemeManager.setTheme(Theme);
      // TODO: consolidate into one request using /utc endpoint
      if (_.isEmpty(UtcStore.claimUtcList)) {
        UtcActions.getClaimUtcList();
      }
      if (_.isEmpty(UtcStore.assetUtcList)) {
        UtcActions.getAssetUtcList();
      }
      if (_.isEmpty(UtcStore.transferUtcList)) {
        UtcActions.getTransfers();
      }
    },
  
    componentDidMount() {
      LoginStore.addChangeListener(this.onLoginChange);
      if (!LoginStore.getLoginData()){
        this.transitionTo('login');
        return false;
      } else {
        LoginActions.checkToken();
      }
    },
  
    onLoginChange(){
      if (!LoginStore.getLoginData()){
        this.transitionTo('login');
      }
    },
  
    render() {
  
      console.log('VERSION: ', versionNumber);
  
      const styles = {
        root: {
          background: '#EEEEEE',
          paddingTop: 55 // see header.jsx menuHeight
        }
      };
  
      console.log('APP', this.context.router.getCurrentPath());
  
      let hideHeaderRoutes = ["/login"];
      let header = true;
      if (this.context.router.getCurrentPath().indexOf(hideHeaderRoutes) &gt; -1){
        header = false;
        styles.root = undefined;
      }
  
      return (
        &lt;MuiThemeProvider muiTheme={Theme}&gt;
          &lt;div style={styles.root}&gt;
            {header ? &lt;Header /&gt; : {}}
  
            &lt;ErrorHandler
              ref="errorHandler"
              /&gt;
            &lt;DialogMessageHandler
              ref="dialogMessageHandler"
              /&gt;
            &lt;ConfirmationDialogHandler
              ref="confirmDialogHandler"
              /&gt;
          &lt;/div&gt;
        &lt;/MuiThemeProvider&gt;
      );
    }
  });
  
  render((
    &lt;Router history={browserHistory}&gt;
      &lt;Route component={App} path="/"&gt;
        &lt;DefaultRoute component={Home}/&gt;
        &lt;Route path="home" component={Home} /&gt;
        &lt;Route path="case" component={CaseController} /&gt;
        &lt;Route path="case/:id/?:reverseToken?" component={CaseController} /&gt; /* reverseToken is optional path variable for going back to last state when we go to case screen*/
        &lt;Route path="login" component={LoginController} /&gt;
        &lt;Route path="x" component={XController} /&gt;
        &lt;Route path="x/?:xDate?/?:xFromTime?/?:xToTime?/?:id?" component={XController} /&gt;
        &lt;Route path="namesAndAddress" component={NamesAndAddressController} /&gt;
        &lt;Route path="reconciliation/?:reverseToken?" component={AccountListing} /&gt;
        &lt;Route path="asset-cases/:predefinedQuery/:sortBy/?:reverseToken?" component={PredefinedSearchAssetCasesController} /&gt;
        &lt;Route path="case-labels/:predefinedQuery/:sortBy/?:reverseToken?" component={PredefinedSearchCaseLabelsController} /&gt;
        &lt;Route path="deep-search/:deepSearchQuery/:sortBy/openCasesOnly::openCasesOnly/assetCasesOnly::assetCasesOnly/searchType::searchType/?:reverseToken?" component={DeepSearchController} /&gt;
      &lt;/Route&gt;
    &lt;/Router&gt;
  ), document.body);
  </code></pre>