title: react router v4 authentication token keep redirecting to /
body: <p>First of all here is my code:</p>
  
  <p><strong>Routes.js</strong></p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import { Redirect, Route } from 'react-router-dom';
  import { PUBLIC_ROUTE, LOGIN_ROUTE } from './utils/constants';
  
  const routes = ({ component: Component, ...rest }) =&gt; {
      let { requireAuth, isAuthenticated } = rest;
  
      if (!requireAuth) {
          requireAuth = false;
      }
  
      // If user authenticated
      if (isAuthenticated) {
          // If page need auth
          if (requireAuth === true) {
              return (
                  &lt;Route {...rest} render={props =&gt; &lt;Component {...props} /&gt;} /&gt;
              );
          } else if (requireAuth === 'partial') { // If the page is doesn't require auth but can't be access if auth true
              return &lt;Redirect to={PUBLIC_ROUTE} /&gt;;
          }
  
          // If page doesn't need auth
          return &lt;Route {...rest} render={props =&gt; &lt;Component {...props} /&gt;} /&gt;;
      }
  
      // If user not authenticated //
  
      // page doesn't require Auth
      if (requireAuth === false || requireAuth === 'partial') {
          return &lt;Route {...rest} render={props =&gt; &lt;Component {...props} /&gt;} /&gt;;
      }
      // If page require Auth redirect user to login routes
      return (
          &lt;Route
              {...rest}
              render={props =&gt; (
                  &lt;Redirect
                      to={{
                          pathname: `${LOGIN_ROUTE}`,
                          state: { from: props.location },
                      }}
                  /&gt;
              )}
          /&gt;
      );
  };
  
  routes.propTypes = {
      component: React.PropTypes.oneOfType([
          React.PropTypes.element,
          React.PropTypes.func,
      ]),
  };
  
  export default routes;
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>const history = createHistory();
  
  const mapStateToProps = state =&gt; {
      const { auth, global } = state;
      const { authenticated, user } = auth;
      const { loading } = global;
  
      return { authenticated, user, loading };
  };
  
  const reduxConnector = connect(mapStateToProps, { ping });
  
  class App extends Component {
      state = {
          isAuthenticated: false,
      };
      static propTypes = {
          authenticated: PropTypes.bool.isRequired,
      };
  
      componentWillReceiveProps(nextProps) {
          this.setState({ isAuthenticated: nextProps.authenticated });
      }
  
      render() {
          const { authenticated, user, loading } = this.props;
          const { isAuthenticated } = this.state;
  
          if (loading) {
              return (
                  &lt;div style={style.center}&gt;
                      &lt;MDSpinner /&gt;
                  &lt;/div&gt;
              );
          }
  
          return (
              &lt;ConnectedRouter history={history}&gt;
                  &lt;div&gt;
                      &lt;NotificationsSystem theme={theme} /&gt;
                      &lt;Header isAuthenticated={isAuthenticated} user={user} /&gt;
                      &lt;NavMobile /&gt;
                      &lt;SideMenu /&gt;
                      &lt;Nav /&gt;
  
                      &lt;Switch&gt;
                          &lt;Routes
                              requireAuth={false}
                              isAuthenticated={isAuthenticated}
                              exact
                              path="/"
                              component={Welcome}
                          /&gt;
  
                          &lt;Routes
                              requireAuth={true}
                              isAuthenticated={isAuthenticated}
                              path="/point"
                              component={Point}
                          /&gt;
  
                          &lt;Routes
                              requireAuth="partial"
                              isAuthenticated={isAuthenticated}
                              path="/login"
                              component={Login}
                          /&gt;
  
                          &lt;Routes render={() =&gt; &lt;h3&gt;No Match&lt;/h3&gt;} /&gt;
                      &lt;/Switch&gt;
                      &lt;Footer /&gt;
  
                  &lt;/div&gt;
              &lt;/ConnectedRouter&gt;
          );
      }
  }
  
  export default reduxConnector(App);
  </code></pre>
  
  <p><strong>Login.js</strong> </p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import { withRouter, Link, Redirect } from 'react-router-dom';
  import { Field, reduxForm } from 'redux-form';
  import { connect } from 'react-redux';
  import cookie from 'react-cookie';
  
  import { Headline, Section, renderField } from 'components';
  import { ping } from 'redux/modules/auth';
  
  function mapStateToProps(state) {
      const { authenticated } = state.auth;
  
      return { authenticated };
  }
  
  const reduxConnector = connect(mapStateToProps, { ping });
  const token = cookie.load('_t');
  
  class Login extends React.Component {
      static defaultProps = {
          loggingIn: false,
          authenticated: false,
      };
  
      componentDidMount(){
          if(cookie.load('_t')){
              this.props.ping();
          }
      }
  
      render() {
          const { handleSubmit } = this.props;
  
          const { from } = this.props.location.state || {
              from: { pathname: '/' },
          };
  
  
          if (this.props.authenticated) {
              return &lt;Redirect to={from} /&gt;;
          }
  
          return  &lt;div&gt;
                  &lt;Headline title="Login" /&gt;
              &lt;/div&gt;;
      }
  }
  
  export default withRouter(reduxConnector(reduxFormDecorator(Login)));
  </code></pre>
  
  <p>Let say I already login to my app. And i want to navigate to <code>/point</code> (need auth to be access), app will <code>redirect</code> to <code>/login</code> after check the token (<code>this.props.ping()</code>):
  1. If the token is valid: it will redirect me back to <code>point</code> page.
  2. If the token is invalid: it will redirect me to <code>login</code> page.</p>
  
  <p>The problem:</p>
  
  <ol>
  <li><p>After checking and token is valid, the app always redirect to <code>/</code>. 
  I've <code>console.log</code> my <code>const {from}</code> the result is <code>{pathname: "/point", search: "", hash: "", state: undefined, key: undefined}</code>. It never return back to previous page (in this situation <code>/point</code> page). </p></li>
  <li><p>If I access '/' it never redirect to login to call <code>ping</code>. I need this because I've header that show user full name. So I need set the state to redux. </p></li>
  </ol>
  
  <p>Any solution?</p>