title: ReactJs this.props.history.push() is not working
body: <p>i'm new with Reactjs and for some reasons i'm working on a small application for learning purpose.</p>
  
  <p>I'm using react-router-dom to navigate between different components.</p>
  
  <p>The idea is when the user click to logout, the App Component should detect the logout event inside the componentWillUpdate() method and then redirect the user to Login Component.</p>
  
  <p>The error is: 
  <a href="https://i.stack.imgur.com/lPwNA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lPwNA.png" alt="enter image description here"></a></p>
  
  <p>Routes.js</p>
  
  <pre><code>import React from 'react';
  import { BrowserRouter, Route, Switch, Link, NavLink } from 'react- 
  router-dom';
  import Login from '../Components/LoginComponent/Login';
  import AddNoteForm from "../Components/AddNoteForm";
  
  
  const AppRouter = () =&gt; (
  &lt;BrowserRouter&gt;
          &lt;Switch&gt;
              &lt;Route path="/" component={AddNoteForm} exact={true} /&gt;
              &lt;Route path="/login" component={Login} exact={true} /&gt;
          &lt;/Switch&gt;
  &lt;/BrowserRouter&gt;
  );
  
  export default AppRouter;
  </code></pre>
  
  <p>Index.js</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { Provider } from 'react-redux';
  import configureStore from './Redux/Store/ConfigureStore';
  import './index.css';
  import App from './App';
  import registerServiceWorker from './registerServiceWorker';
  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
  
  
  const store = configureStore();
  
  
  const jsx = (
  &lt;Provider store={store}&gt;
      &lt;MuiThemeProvider&gt;
          &lt;App /&gt;
      &lt;/MuiThemeProvider&gt;
  &lt;/Provider&gt;
  );
  
  ReactDOM.render(jsx, document.getElementById('root'));
  registerServiceWorker();
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  import { Grid, Col, Row } from 'react-bootstrap';
  import Navigation from "./Components/Navigation";
  import AddNoteForm from "./Components/AddNoteForm";
  import Clock from "./Components/Clock";
  import { connect } from 'react-redux';
  import AppRoutes from "./Routes/Routes";
  
  class App extends Component {
  
  constructor(props) {
  super(props);
  }
    componentWillUpdate(nextProps, nextState) {
  
  if (nextProps.store.user.email === null || nextProps.store.user.email 
  == undefined) {
    this.props.history.replace('/login');
  }
  
   }
  
  
   render() {
   return (
    &lt;div className="App"&gt;
      &lt;header className="App-header"&gt;
        &lt;h1 className="App-title"&gt;Welcome to this Learing React 
  Application.&lt;/h1&gt;
      &lt;/header&gt;
      &lt;div className="App-intro" &gt;
        &lt;Navigation&gt;&lt;/Navigation&gt;
        &lt;Grid&gt;
          &lt;Row className="show-grid"&gt;
            &lt;AppRoutes /&gt;
          &lt;/Row&gt;
        &lt;/Grid&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    );
   }
  }
  
  const mapStateToProps = (store) =&gt; {
    return { store };
  };
  
  export default connect(mapStateToProps)(App);
  </code></pre>
  
  <p>Package.json</p>
  
  <pre><code>    {
        "name": "first-react",
        "version": "0.1.0",
        "private": true,
        "dependencies": {
          "install": "^0.11.0",
          "material-ui": "^0.20.0",
          "npm": "^6.0.0",
          "react": "^16.2.0",
          "react-bootstrap": "^0.32.1",
          "react-dom": "^16.2.0",
          "react-redux": "^5.0.7",
          "react-router-dom": "^4.2.2",
          "react-scripts": "1.1.1",
          "react-spinner": "^0.2.7",
          "react-spinners": "^0.3.2",
          "react-toastify": "^4.0.0-rc.5",
          "redux": "^4.0.0",
          "redux-thunk": "^2.2.0",
          "uuid": "^3.2.1"
        },
        "scripts": {
          "start": "react-scripts start",
          "build": "react-scripts build",
          "test": "react-scripts test --env=jsdom",
          "eject": "react-scripts eject"
        }
      }
  </code></pre>