title: react router doesn't re-render after history push
body: <p>I'm looking to re render/refresh, after a user has logged in, so im using <code>history.push</code> to do that.</p>
  
  <pre><code>import {history} from '../layout/Navbar'
  export const loginUser = userData =&gt; dispatch =&gt; {
      Axios.post('/users/login', userData)
          .then( res =&gt; {
              // retrieve token from the response 
              const token = res.data.token;
              // console.log(token);
              // pass the token in session
              sessionStorage.setItem("jwtToken", token);
              // set the auth token
              setAuthToken(token);
  
              // decode the auth token
              const decoded = jwt_decode(token);
              // pass the decoded token
              dispatch(setCurrentUser(decoded))
              history.push('/dashboard');
  
          })
          .catch(err =&gt; {
              if(err.response.data){
                  console.log(err.response)
                  dispatch({
                      type: GET_ERRORS,
                      payload: err.response.data
                  })
              }
          })
  }
  
  export const getUser = () =&gt; {
      return (dispatch) =&gt; {
          return Axios.get('/users/current_user',{
          }).then( res =&gt; {
              const data = res.data
              dispatch({type: GET_CURRENT_USER, data})
          })
      }
  }
  
  export const setCurrentUser = (decoded, dispatch) =&gt; {
      return{
          type:SET_CURRENT_USER,
          payload:decoded,
  
      }
  
  }
  </code></pre>
  
  <p>Instead it doesn't seem to re-render because im getting an error that only should have an error if a user isn't logged in.</p>
  
  <p>For example</p>
  
  <pre><code>TypeError: Cannot read property 'user' of undefined
  </code></pre>
  
  <p>on one of my components. </p>
  
  <p>On refresh on the dashboard page, the error goes away, so im looking for a way to re render the state, and redirect to dashboard that way a user will exist or throw an unauthorized error if given the wrong credentials. </p>
  
  <p><strong>Navbar.js</strong></p>
  
  <pre><code>import React, {Component} from "react";
  import {BrowserRouter, Link, Route, Switch} from "react-router-dom";
  import PrivateRoute from '../components/PrivateRoute';
  import Home from '../components/Home';
  import Dashboard from '../components/Dashboard';
  import {connect} from 'react-redux';
  import Login from '../components/Login';
  import AppBar from '@material-ui/core/AppBar';
  import Toolbar from '@material-ui/core/Toolbar';
  import Typography from '@material-ui/core/Typography';
  import Button from '@material-ui/core/Button';
  import {logoutUser} from '../actions/authActions';
  import SignUp from "../components/SignUp";
  import Grid from '@material-ui/core/Grid';
  import {createBrowserHistory} from 'history';
  
  // import createBrowserHistory from 'history/createBrowserHistory'
  
  export const history = createBrowserHistory()
  
  class Navbar extends Component {
      logout = (e) =&gt; {
          e.preventDefault();
          this.props.logoutUser();
  
      }
      render() {
          // LINKS
          const authLinks = (
              &lt;span&gt;
                  &lt;Button&gt;
                      &lt;Link to="/dashboard" color="primary"&gt;
                          Dashboard
                      &lt;/Link&gt;
                  &lt;/Button&gt;       
                  &lt;Button onClick={this.logout} to="/"&gt;
                      &lt;span&gt;Logout&lt;/span&gt;
                  &lt;/Button&gt;
              &lt;/span&gt;
  
          );
          const guestLinks = (
              &lt;span&gt;
                  &lt;Button&gt;
                      &lt;Link to="/login"&gt;
                          Login
                      &lt;/Link&gt;
                  &lt;/Button&gt;
  
                  &lt;Button&gt;
                      &lt;Link to="/signup"&gt;
                         Sign Up
                      &lt;/Link&gt;
  
                  &lt;/Button&gt;
              &lt;/span&gt;
          );
          return (
              &lt;div&gt;
                  &lt;BrowserRouter history={history}&gt;
  
                      &lt;AppBar position="static"&gt;
                          &lt;Toolbar&gt;
                          &lt;Grid justify="space-between" container &gt;
                              &lt;Typography variant="h6" style={{ color: '#fff'}}&gt;
                                 Image Upload App
                              &lt;/Typography&gt;                         
  
                               {/* if is authenticated, will render authlinks 
                                  if not will render guest links
                              */}
                              &lt;Grid item&gt;
                                  &lt;Button align="right"&gt;
                                      &lt;Link style={{ color:'#fff'}} underline="none" to="/"&gt;
                                          Home
                                      &lt;/Link&gt;
                                  &lt;/Button&gt;
                                   {this.props.auth.isAuthenticated ? authLinks : guestLinks}
  
                              &lt;/Grid&gt;
  
  
  
  
                          &lt;/Grid&gt;
                          &lt;/Toolbar&gt;
                      &lt;/AppBar&gt;
                      &lt;Switch&gt;
                          &lt;Route exact path="/" component={Home}/&gt;
                          &lt;Route exact path="/signUp" component ={SignUp}/&gt;
                          &lt;Route exact path="/login" component={Login}/&gt; {/* private routes for users who are authenticated */}
                          &lt;PrivateRoute exact path="/dashboard" component={Dashboard}&gt;&lt;/PrivateRoute&gt;
  
                      &lt;/Switch&gt;
                  &lt;/BrowserRouter&gt;
              &lt;/div&gt;
          )
      }
  }
  
  const mapDispatchToProps = (dispatch) =&gt; ({
      logoutUser: () =&gt; dispatch(logoutUser())
  })
  const mapStateToProps = (state) =&gt; ({
      auth: state.auth
  })
  export default connect(mapStateToProps,mapDispatchToProps)(Navbar)
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  import setAuthToken from "./actions/utils/setAuthToken";
  import Navbar from './layout/Navbar';
  import jwt_decode from "jwt-decode";
  import store from './store';
  import {setCurrentUser, logoutUser, getUser } from './actions/authActions';
  import { Provider } from "react-redux";
  
  // JWT TOKEN
  if (sessionStorage.jwtToken) {
    // Set auth token header auth
    setAuthToken(sessionStorage.jwtToken);
    // Decode token and get user info and exp
    const decoded = jwt_decode(sessionStorage.jwtToken);
    // Set user and isAuthenticated
    store.dispatch(setCurrentUser(decoded));
  
    store.dispatch( getUser());
  
    // Check for expired token
    const currentTime = Date.now() / 1000;
    if (decoded.exp &lt; currentTime) {
  
      // Logout user
      store.dispatch(logoutUser());
      // Redirect to login
      window.location.href = "/login";
    }
  
  
  
  }
  class App extends Component {
    render(){
      return (
        &lt;Provider store={store}&gt;
           &lt;Navbar/&gt;
        &lt;/Provider&gt;
      );
    }
  }
  export default App;
  </code></pre>
  
  <p><strong>Login</strong></p>
  
  <pre><code>import React, { Component } from "react";
  import {connect} from 'react-redux';
  import {Redirect} from "react-router-dom";
  import {loginUser, googleLogin } from '../actions/authActions';
  import Grid from '@material-ui/core/Grid';
  import PropTypes from "prop-types";
  import { GoogleLogin } from "react-google-login";
  import Divider from '@material-ui/core/Divider';
  import Typography from '@material-ui/core/Typography';
  import { GoogleLoginButton} from "react-social-login-buttons";
  import LoginForm from './LoginForm/LoginForm';
  import {history} from '../layout/Navbar';
  import { withRouter } from "react-router-dom";
  // const onSuccess = response =&gt; console.log(response);
  // const onFailure = response =&gt; console.error(response);
  class Login extends Component{
      constructor() {
          super();
          this.state = {
              formData:{
                  username:'',
                  password:'',
                  isAuthenticated: false,
              },
              errors:{}
          }
      }
      logInGithub = (e) =&gt; {
          e.preventDefault();
          console.log('hello');
          this.props.githubLogin();
      }
      componentDidMount() {
          // console.log(this.props.auth);
          if (this.props.auth.isAuthenticated) {
            this.props.history.push("/dashboard");
          }
        }
      componentDidUpdate(){
          if(this.props.auth.isAuthenticated){
              this.props.history.push("/dashboard")
          }
      }
  
      handleChange = (e) =&gt; {
          e.preventDefault();
          const {formData} = this.state;
          this.setState({
              formData: {
                  ...formData,
                  [e.target.name]: e.target.value
              }
          });
      }
      handleSubmit = (e) =&gt; {
          e.preventDefault();
          const {formData} = this.state;
          const {username, password} = formData;
          const creds = {
              username,
              password
          }
          this.props.loginUser(creds,  this.props.history);
  
  
          // console.log(creds);
      }
      render(){
          const googleLogin = response =&gt; {
              let googleData;
              googleData = {
                googleID: response.profileObj.googleId,
                email: response.profileObj.email,
              //   password: "",
              };
              console.log(googleData);
              this.props.googleLogin(googleData);
            };
          return(
              &lt;div&gt;
              &lt;Grid container justify="center" spacing={0}&gt;
                  &lt;Grid item  sm={10} md={6} lg={4} style={{ margin:'20px 0px'}}&gt;
                  &lt;Typography variant="h4" style={{ letterSpacing: '2px'}} &gt;
                       Sign In
                  &lt;/Typography&gt;
                  {this.props.auth.errors ? (
                      this.props.auth.errors.map( (err, i) =&gt; (
                          &lt;div key={i} style={{color: 'red' }}&gt;
                              {err} 
                          &lt;/div&gt;
                      ))                  
                  ):(
                      null
                  )}
                  &lt;LoginForm 
                      mySubmit={this.handleSubmit}
                      myChange={this.handleChange}
                      username={this.state.username}
                      password={this.state.password}
                  /&gt;
                      &lt;Grid item sm={12}&gt;
                              &lt;Typography align="center" variant="h4" style={{ letterSpacing: '6px'}} &gt;
                                  OR
                              &lt;/Typography&gt;
                          &lt;Divider style={{ width: '200px', margin:'20px auto', backgroundColor:'#000000'}} variant="middle" /&gt;
                      &lt;/Grid&gt;
  
                  &lt;/Grid&gt;
              &lt;/Grid&gt;
              &lt;/div&gt;
          )
      }
  }
  Login.propTypes = {
      loginUser: PropTypes.func.isRequired,
      auth: PropTypes.object.isRequired,
      errors: PropTypes.object
  };
  const mapStateToProps = (state) =&gt; ({
      auth: state.auth
  })
  const mapDispatchToProps = (dispatch) =&gt; ({
      loginUser: (userData) =&gt; dispatch(loginUser(userData)),
      googleLogin: (userData) =&gt; dispatch(googleLogin(userData))
  })
  export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Login))
  </code></pre>