title: React Router Redux upgrade from v3 to v4
body: <p>I am trying to upgrade react-router from v3 to v4 and getting the following error when running the application : </p>
  
  <pre><code>Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
  </code></pre>
  
  <p>reducer : </p>
  
  <pre><code>import { combineReducers } from 'redux';
  import { routerReducer } from 'react-router-redux';
  
  import { login } from './login-reducer';
  
  const reducers = combineReducers({
    routing: routerReducer,
    login
  })
  
  export default reducers;
  </code></pre>
  
  <p>store : </p>
  
  <pre><code>import { createStore, applyMiddleware, compose } from 'redux'
  import thunk from 'redux-thunk';
  import createHistory from 'history/createBrowserHistory'
  import { routerMiddleware } from 'react-router-redux'
  
  import reducers from '../reducers';
  
  export const history = createHistory();
  const routerMiddle = routerMiddleware(history);
  
  const composeEnhancers =
    typeof window === 'object' &amp;&amp;
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
      }) : compose;
  
  let middleware = [routerMiddle, thunk]
  const enhancer = composeEnhancers(
    applyMiddleware(...middleware),
    // other store enhancers if any
  );
  
  const store = createStore(reducers, enhancer);
  
  export default store;
  </code></pre>
  
  <p>index : 
  import React from 'react';</p>
  
  <pre><code>import ReactDOM from 'react-dom';
  import { Provider } from 'react-redux'
  import store, { history } from './store/createStore';
  import { ConnectedRouter } from 'react-router-redux'
  
  import { getRoutes } from './routes';
  
  import './index.css';
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;ConnectedRouter history={history}&gt;
        &lt;div&gt;{ getRoutes(store) }&lt;/div&gt;
      &lt;/ConnectedRouter&gt;
    &lt;/Provider&gt;,
    document.getElementById('root')
  );
  </code></pre>
  
  <p>routes :</p>
  
  <pre><code>import React from 'react';
  import { Route } from 'react-router';
  
  import App from './containers/App';
  import Login from './containers/Login';
  import Protected from './components/Protected';
  
  export const getRoutes = (store) =&gt; {
    const authRequired = (nextState, replaceState) =&gt; {
      // Now you can access the store object here.
      const state = store.getState();
  
      if (!state.login.loggedIn || state.login.loggedIn == null) {
        // Not authenticated, redirect to login.
        replaceState({
          pathname: '/login',
          state: { nextPathname: nextState.location.pathname }
        });
      }
    };
  
    return (
      &lt;div&gt;
        &lt;Route exact path="/" component={App} /&gt;
        &lt;Route path="/login" component={Login} /&gt;
        &lt;Route path="/protected" component={Protected} onEnter={authRequired} /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>app :</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Link } from 'react-router';
  import { connect } from 'react-redux'
  
  import logo from '../logo.svg';
  import './App.css';
  
  class App extends Component {
    render() {
      const isLoggedIn = this.props.isLoggedIn;
      return (
        &lt;div className="App"&gt;
          &lt;div className="App-header"&gt;
            &lt;img src={logo} className="App-logo" alt="logo" /&gt;
            &lt;h2&gt;&lt;Link to="/"&gt;Welcome to React&lt;/Link&gt;&lt;/h2&gt;
            &lt;div className="app-nav"&gt;
              &lt;nav&gt;
                &lt;Link to='about'&gt;About&lt;/Link&gt;
                &lt;Link to='login'&gt;{( isLoggedIn ? 'Logout' : 'Login' )}&lt;/Link&gt;
                &lt;Link to='protected'&gt;Protected&lt;/Link&gt;
              &lt;/nav&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          {this.props.children}
        &lt;/div&gt;
      );
    }
  }
  
  const mapStateToProps = (state) =&gt; {
    return {
      isLoggedIn:  (state.login.loggedIn ? state.login.loggedIn : false) 
    }
  }
  
  App = connect (
    mapStateToProps
  )(App)
  
  export default App;
  </code></pre>
  
  <p>Not sure what I'm missing to get this to work</p>
  
  <p>**NOTE : I am still seeing this error even when I only have one route <code>/</code> and render a static component (single div with text)</p>