title: ConnectedRouter TypeError: Cannot read property 'dispatch' of undefined
body: <p>trying my hands on React/Redux following the tutorial on Part 3: <a href="https://tighten.co/blog/react-101-routing-and-auth" rel="noreferrer">https://tighten.co/blog/react-101-routing-and-auth</a>.</p>
  
  <p>Part 1 and 2 has been awesome until part 3 where I bumped into the error in the title. I'm pretty sure I've been following the tutorial fine up to this point.</p>
  
  <p>Any help is much appreciated. Thanks in advance SO.</p>
  
  <p><a href="https://i.stack.imgur.com/sTjTA.png" rel="noreferrer"><img src="https://i.stack.imgur.com/sTjTA.png" alt="Error Info"></a> </p>
  
  <pre><code>The above error occurred in the &lt;ConnectedRouter&gt; component:
  index.js:1446
      in ConnectedRouter (at App.js:39)
      in App (created by Context.Consumer)
      in Connect(App) (at src/index.js:11)
      in Provider (at src/index.js:10)
  </code></pre>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './containers/App';
  import { Provider } from 'react-redux';
  import { configureStore } from './store/configureStore';
  
  const store = configureStore();
  
      ReactDOM.render(
        &lt;Provider store={store}&gt;
          &lt;App /&gt;
        &lt;/Provider&gt;,
        document.getElementById('app')
      )
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React from 'react';
  import { ConnectedRouter } from 'react-router-redux';
  import { Route, Redirect } from 'react-router-dom'
  import { history } from './../store/configureStore';
  import { connect } from 'react-redux';
  
  import Header from '../containers/Header';
  import Home from '../containers/Home';
  import Signup from '../containers/Signup';
  import Login from '../containers/Login';
  import Favorites from '../containers/Favorites';
  
  const PrivateRoute = ({component: Component, authenticated, ...props}) =&gt; {
      return (
          &lt;Route
              {...props}
              render={(props) =&gt; authenticated === true
                  ? &lt;Component {...props} /&gt;
                  : &lt;Redirect to={{pathname: '/login', state: {from: props.location}}} /&gt;}
          /&gt;
      );
  };
  
  const PublicRoute = ({component: Component, authenticated, ...props}) =&gt; {
      return (
          &lt;Route
              {...props}
              render={(props) =&gt; authenticated === false
                  ? &lt;Component {...props} /&gt;
                  : &lt;Redirect to='/favorites' /&gt;}
          /&gt;
      );
  };
  
  
  class App extends React.Component {
      render() {
          return (
              &lt;ConnectedRouter history={history}&gt;
                  &lt;div&gt;
                      &lt;Header /&gt;
  
                      &lt;div className="container"&gt;
                          &lt;Route exact path="/" component={ Home }/&gt;
                          &lt;PublicRoute authenticated={this.props.authenticated }  path="/signup" component={ Signup } /&gt;
                          &lt;PublicRoute authenticated={this.props.authenticated }  path="/login" component={ Login } /&gt;
                          &lt;PrivateRoute authenticated={this.props.authenticated }  path="/favorites" component={ Favorites } /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/ConnectedRouter&gt;
          );
      }
  }
  
  const mapStateToProps = (state) =&gt; {
      return { authenticated: state.auth.authenticated };
  };
  
  export default connect(mapStateToProps)(App);
  </code></pre>
  
  <p><strong>ConfigureStore.js</strong></p>
  
  <pre><code>import { createStore, compose, applyMiddleware } from 'redux';
  import ReduxPromise from 'redux-promise';
  import rootReducer from '../reducers';
  import createHistory from 'history/createBrowserHistory';
  import { routerMiddleware } from 'react-router-redux';
  
  export const history = createHistory();
  
  export function configureStore(initialState) {
    const store = createStore(
      rootReducer,
      initialState,
      compose (
        applyMiddleware(ReduxPromise, routerMiddleware(history)),
        window.devToolsExtension ? window.devToolsExtension() : f =&gt; f
      )
      //window.devToolsExtension ? window.devToolsExtension() : undefined
    );
  
    if (module.hot) {
      // Enable Webpack hot module replacement for reducers
      module.hot.accept('../reducers', () =&gt; {
        const nextRootReducer = require('../reducers').default;
        store.replaceReducer(nextRootReducer);
      });
    }
  
    return store;
  }
  </code></pre>