title: React Router Authentication Redirection
body: <p>I am currently implementing an authentication/login flow with <code>React</code> and <code>React Router V4</code>. But I am struggling to find a working redirect "schema" to implement my idea. </p>
  
  <p>The situation is as follows:</p>
  
  <ol>
  <li>If a user is <strong>not logged in</strong> to my system he/she should get redirect
  to "/login", and a specific login page component is rendered. This should be a requirement of the system, so that I can share register and login links for my application.</li>
  <li>If the user is <strong>logged in</strong> he/should should be redirected to the route the user originally wants to visit.</li>
  </ol>
  
  <p>My current implementation:</p>
  
  <p><em>Entry Component</em></p>
  
  <pre><code>export default class Entry extends React.Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      return (
          &lt;Router&gt;
            &lt;Routes /&gt;
          &lt;/Router&gt;
      );
    }
  }
  </code></pre>
  
  <p><em>Routes Component (authentication checking takes place here)</em></p>
  
  <pre><code>class Routes extends PureComponent {
  
    componentDidMount() {
      this.props.loadUser(); // async method (redux) loads the actual logged in user
    }
    render() {
      return (
        &lt;Switch&gt;
          &lt;Route path="/login" render={() =&gt; (!this.props.user.username ? &lt;LoginPage {...this.props}/&gt; : &lt;Redirect to="/app" /&gt;)} /&gt;
          &lt;Route path="/app" render={() =&gt; (this.props.user.username ? &lt;AppPage {...this.props} /&gt; : &lt;Redirect to="/login" /&gt;)} /&gt;
          &lt;Route exact path="/" render={props =&gt; &lt;Redirect to="/app" /&gt;} /&gt;
        &lt;/Switch&gt;
      );
    }
  }
  export default Routes;
  </code></pre>
  
  <p><em>App component (nested routing here)</em></p>
  
  <pre><code>export default class App extends React.Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      const { match, user, logout } = this.props;
      return (
        &lt;Switch&gt;
           &lt;Route path={`${match.path}/about`} component={About} /&gt;
           &lt;Route path={`${match.path}`} component={Home} /&gt;
        &lt;/Switch&gt;
      );
    }
  }
  </code></pre>
  
  <p>The Problem now occurs when the following is happening:</p>
  
  <ol>
  <li>The user is logged in but has closed the tab of my application</li>
  <li>The user now wants to visit <code>/app/about</code></li>
  <li>The routes component is loading but <code>this.props.user.username</code> is <code>null</code></li>
  <li>User gets redirected to <code>/login</code></li>
  <li>Now the async method <code>this.props.loadUser()</code> has updated the redux store and <code>this.props.user.username</code> is not <code>null</code> anymore and then the user gets redirected to <code>/app</code> but he originally wanted to visit <code>/app/about</code>.</li>
  </ol>
  
  <p>So the line which makes me headaches is </p>
  
  <pre><code>&lt;Route path="/login" render={() =&gt; (!this.props.user.username ? &lt;LoginPage {...this.props}/&gt; : &lt;Redirect to="/app" /&gt;)} /&gt;
  </code></pre>
  
  <p>How should I handle this specific approach so that the user gets redirected to the URL he/she originally wanted to visit ?</p>
  
  <p>Maybe my overall approach is a little bit weird.</p>
  
  <p>Thanks in advance, I appreciate every help :) </p>