title: TypeError: Cannot read property 'history' of undefined
body: <p>I'm trying to redirect the user to the login page when the /logout routes is hit. The auth is working (jwt token is removed, but the app fails to redirect to /login.</p>
  <p>Also If I do to / the app crashes as well.</p>
  <p>On the Login route I uses withRouter from the react-router-dom package wih this I can access the <code>this.props.history.push('/redirect_to_a_new_path')</code>, but when I try to wrap the App component with <code>withRouter</code> method it crashes as well.</p>
  <p>Please help!</p>
  <p>Here is the <a href="https://github.com/isaklafleur/adventurespots/tree/dev" rel="nofollow noreferrer">github repo</a>:</p>
  <p>App.js</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import {
    BrowserRouter as Router,
    Route,
    Switch,
    withRouter
  } from &quot;react-router-dom&quot;;
  import MuiThemeProvider from &quot;material-ui/styles/MuiThemeProvider&quot;;
  import lightBaseTheme from &quot;material-ui/styles/baseThemes/lightBaseTheme&quot;;
  import getMuiTheme from &quot;material-ui/styles/getMuiTheme&quot;;
  import injectTapEventPlugin from &quot;react-tap-event-plugin&quot;;
  
  // Components
  import Navbar from &quot;./components/Navbar&quot;;
  import HomePage from &quot;./components/HomePage&quot;;
  import SpotMap from &quot;./components/SpotMap&quot;;
  import SignUpPage from &quot;./components/containers/SignUpPage&quot;;
  import LoginPage from &quot;./components/containers/LoginPage&quot;;
  import DashboardPage from &quot;./components/containers/DashBoardPage&quot;;
  import NotFound from &quot;./components/NoteFound&quot;;
  import Auth from &quot;./modules/Auth&quot;;
  import &quot;./styles/App.css&quot;;
  
  injectTapEventPlugin();
  
  const handleLogout = event =&gt; {
    Auth.deauthenticateUser();
    this.props.history.push(&quot;/login&quot;);
  };
  
  const isLoggedIn = event =&gt; {
    if (Auth.isUserAuthenticated()) {
      this.props.history.push(DashboardPage);
    } else {
      this.props.history.push(HomePage);
    }
  };
  
  class App extends Component {
    render() {
      return (
        &lt;MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}&gt;
          &lt;Router&gt;
            &lt;div&gt;
              &lt;Navbar /&gt;
              &lt;Switch&gt;
                &lt;Route exact path=&quot;/&quot; component={isLoggedIn} /&gt;
                &lt;Route path=&quot;/spotmap&quot; component={SpotMap} /&gt;
                &lt;Route path=&quot;/dashboard&quot; component={DashboardPage} /&gt;
                &lt;Route path=&quot;/signup&quot; component={SignUpPage} /&gt;
                &lt;Route path=&quot;/login&quot; component={LoginPage} /&gt;
                &lt;Route path=&quot;/logout&quot; component={handleLogout} /&gt;
                &lt;Route component={NotFound} /&gt;
              &lt;/Switch&gt;
            &lt;/div&gt;
          &lt;/Router&gt;
        &lt;/MuiThemeProvider&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  <p>This is written in React Router v3 and this is what I need to convert to React Router V4. <strong>The routes that does not work for me are the &quot;/&quot; and &quot;logout&quot; routes.</strong></p>
  <pre><code>import Base from './components/Base.jsx';
  import HomePage from './components/HomePage.jsx';
  import DashboardPage from './containers/DashboardPage.jsx';
  import LoginPage from './containers/LoginPage.jsx';
  import SignUpPage from './containers/SignUpPage.jsx';
  import Auth from './modules/Auth';
  
  
  const routes = {
    // base component (wrapper for the whole application).
    component: Base,
    childRoutes: [
  
      {
        path: '/',
        getComponent: (location, callback) =&gt; {
          if (Auth.isUserAuthenticated()) {
            callback(null, DashboardPage);
          } else {
            callback(null, HomePage);
          }
        }
      },
  
      {
        path: '/login',
        component: LoginPage
      },
  
      {
        path: '/signup',
        component: SignUpPage
      },
  
      {
        path: '/logout',
        onEnter: (nextState, replace) =&gt; {
          Auth.deauthenticateUser();
  
          // change the current URL to /
          replace('/');
        }
      }
  
    ]
  };
  
  export default routes;
  </code></pre>