title: How to implement authenticated routes in React Router 4?
body: <p>I was trying to implement authenticated routes but found that React Router 4 now prevents this from working:</p>
  <pre><code>&lt;Route exact path=&quot;/&quot; component={Index} /&gt;
  &lt;Route path=&quot;/auth&quot; component={UnauthenticatedWrapper}&gt;
      &lt;Route path=&quot;/auth/login&quot; component={LoginBotBot} /&gt;
  &lt;/Route&gt;
  &lt;Route path=&quot;/domains&quot; component={AuthenticatedWrapper}&gt;
      &lt;Route exact path=&quot;/domains&quot; component={DomainsIndex} /&gt;
  &lt;/Route&gt;
  </code></pre>
  <p>The error is:</p>
  <blockquote>
  <p>Warning: You should not use <code>&lt;Route component&gt;</code> and <code>&lt;Route children&gt;</code> in the same route; <code>&lt;Route children&gt;</code> will be ignored</p>
  </blockquote>
  <p>In that case, what's the correct way to implement this?</p>
  <p>It appears in <code>react-router</code> (v4) docs, it suggests something like</p>
  <pre><code>&lt;Router&gt;
      &lt;div&gt;
      &lt;AuthButton/&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;Link to=&quot;/public&quot;&gt;Public Page&lt;/Link&gt;&lt;/li&gt;
          &lt;li&gt;&lt;Link to=&quot;/protected&quot;&gt;Protected Page&lt;/Link&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;Route path=&quot;/public&quot; component={Public}/&gt;
      &lt;Route path=&quot;/login&quot; component={Login}/&gt;
      &lt;PrivateRoute path=&quot;/protected&quot; component={Protected}/&gt;
      &lt;/div&gt;
  &lt;/Router&gt;
  </code></pre>
  <p>But is it possible to achieve this while grouping a bunch of routes together?</p>
  <hr />
  <p>After some research, I came up with this:</p>
  <pre><code>import React, {PropTypes} from &quot;react&quot;
  import {Route} from &quot;react-router-dom&quot;
  
  export default class AuthenticatedRoute extends React.Component {
    render() {
      if (!this.props.isLoggedIn) {
        this.props.redirectToLogin()
        return null
      }
      return &lt;Route {...this.props} /&gt;
    }
  }
  
  AuthenticatedRoute.propTypes = {
    isLoggedIn: PropTypes.bool.isRequired,
    component: PropTypes.element,
    redirectToLogin: PropTypes.func.isRequired
  }
  </code></pre>
  <p>Is it correct to dispatch an action in <code>render()</code>? It feels wrong. It doesn't really seem correct with <code>componentDidMount</code> or some other hook, either.</p>