title: React Router, won't push to new component - Cannot read property 'history' of undefined
body: <p>I've been having a serious headache and hopefully someone can help. </p>
  
  <p>When logging out, I want to render the logged out home page, or a login page for users to be redirected to. </p>
  
  <p>Instead, my navigation bar changes from logged in to logged out (so I know the user is logged out), but the login or home page component does not render. </p>
  
  <p>I know the routes exist. <code>'/login' or '/'</code> ...I've tried both.</p>
  
  <p>Here is the error.</p>
  
  <pre><code>user_navigation.jsx:20 Uncaught TypeError: Cannot read property 'history' of undefined
  </code></pre>
  
  <p>If I manually refresh my page it'll return to the homepage, but that is a redirect from the logged in component's componentDidMount function.  </p>
  
  <p>This also tells me that the <code>this.props.history.push('/login')</code> is not being reached in the promise because the user Id stays in the url unless I refresh and then it redirects to a page I am not sending it to. </p>
  
  <p>Below is the logout function, and I'll add in the routes. </p>
  
  <p>I appreciate any help in advance. </p>
  
  <pre><code>import React from 'react';
  import { Nav, Navbar, NavItem, NavDropdown, MenuItem, Button } from 'react-bootstrap';
  import UniversalButton from '../buttons/universal_button.jsx';
  import { withRouter } from 'react-router-dom';
  import ReactLoading from 'react-loading';
  import { clearAll } from '../../actions/reset_state';
  import { connect } from 'react-redux';
  import { logout } from '../../actions/session_actions'
  
  class UserNavigation extends React.Component {
    constructor(props) {
      super(props);
  
      this.handleLogout = this.handleLogout.bind(this)
    }
  
    handleLogout(e) {
      e.preventDefault();
      this.props.logout().then(() =&gt; {
        this.props.clearAll()
        this.props.history.push('/login')
      })
    }
  
    render() {
      return(
        &lt;Navbar inverse collapseOnSelect className="nav-bar"&gt;
          &lt;Navbar.Header&gt;
            &lt;Navbar.Brand&gt;
              &lt;a href="#"&gt;liftly&lt;/a&gt;
            &lt;/Navbar.Brand&gt;
            &lt;Navbar.Toggle /&gt;
          &lt;/Navbar.Header&gt;
          &lt;Navbar.Collapse&gt;
            &lt;Nav&gt;
              &lt;NavItem eventKey={2} href="#"&gt;Leaderboard&lt;/NavItem&gt;
              &lt;NavDropdown eventKey={3} title="Portfolio" id="basic-nav-dropdown"&gt;
                &lt;MenuItem eventKey={3.1}&gt;Workout Log&lt;/MenuItem&gt;
                &lt;MenuItem eventKey={3.2}&gt;Progress Tracker&lt;/MenuItem&gt;
                &lt;MenuItem eventKey={3.3}&gt;Friends&lt;/MenuItem&gt;
                &lt;MenuItem divider /&gt;
                &lt;MenuItem eventKey={3.3}&gt;Coaching&lt;/MenuItem&gt;
              &lt;/NavDropdown&gt;
            &lt;/Nav&gt;
            &lt;Navbar.Form pullRight&gt;
              &lt;Button bsStyle="danger" onClick={this.handleLogout}&gt;Log Out&lt;/Button&gt;
            &lt;/Navbar.Form&gt;
          &lt;/Navbar.Collapse&gt;
        &lt;/Navbar&gt;
      )
    }
  }
  
  const mapDispatchToProps = dispatch =&gt; {
    return {
      clearAll: () =&gt; dispatch(clearAll()),
      logout: () =&gt; dispatch(logout())
    }
  }
  export default withRouter(connect(null, mapDispatchToProps)(UserNavigation))
  </code></pre>
  
  <p>Routes </p>
  
  <pre><code>const app = () =&gt; (
    &lt;div&gt;
      &lt;Navigation/&gt;
      &lt;Switch&gt;
        &lt;ProtectedRoute exact path='/' component={LoggedOutHomePage} /&gt;
        &lt;AuthRoute path='/login' component={Login} /&gt;
        &lt;AuthRoute path='/coach-signup' component={CoachSignup} /&gt;
        &lt;AuthRoute path='/member-signup' component={MemberSignup} /&gt;
        &lt;Route path ='/users/:userId' component={MembersHomePage} /&gt;
        &lt;Route path ='/new-workout' component={NewWorkout} /&gt;
        &lt;Route path ='/workout/:workoutId' component={WorkoutDetailsContainer} /&gt;
      &lt;/Switch&gt;
    &lt;/div&gt;
  );
  
  export default DragDropContext(HTML5Backend)(app);
  </code></pre>
  
  <p>Protected/Auth Routes</p>
  
  <pre><code>import React from 'react'
  import { Route, withRouter, Redirect } from 'react-router-dom';
  import { connect } from 'react-redux';
  
  
  const Protected = ({component: Component, path, loggedIn, currentUser}) =&gt; {
    return(
      &lt;Route
        path={path}
        render={ props =&gt; loggedIn ? &lt;Redirect to={`/users/${currentUser.id}`} /&gt;  : &lt;Component {...props}/&gt; }
      /&gt;
    )
  }
  
  
  const Auth = ({component: Component, path, loggedIn}) =&gt; {
    return(
      &lt;Route
        path={path}
        render={ props =&gt; !loggedIn ? &lt;Component {...props}/&gt;  : &lt;Redirect to="/" /&gt; }
      /&gt;
    )
  }
  
  
  const mapStateToProps = (state) =&gt; {
    return{
      loggedIn: Boolean(state.session.currentUser),
      currentUser: state.session.currentUser
    }
  }
  
  export const ProtectedRoute = withRouter(connect(mapStateToProps)(Protected))
  export const AuthRoute = withRouter(connect(mapStateToProps)(Auth))
  </code></pre>