title: React router v4 with redux protected routes and auth
body: <p>I'm using react router v4 with redux and i want to make use of private and protected route to redirect if user is not logged in.</p>
  
  <p>i have this Routes component:</p>
  
  <pre><code>class Routes extends Component {
  
  render() {
      const { auth } = this.props;
      // so checks against isAuthenticated can pass
      if (auth.isAuthenticated !== undefined) {
          return (
              &lt;div&gt;
                  &lt;Route exact component={() =&gt; &lt;Home /&gt;} /&gt;
                  &lt;PublicRoute
                      authed={() =&gt; auth.isAuthenticated}
                      path="/login"
                      component={(routerProps) =&gt; &lt;Login {...routerProps} /&gt;}
                  /&gt;
                  &lt;PublicRoute
                      authed={() =&gt; auth.isAuthenticated}
                      path="/register"
                      component={(routerProps) =&gt; &lt;Register {...routerProps} /&gt;}
                  /&gt;
                  &lt;PrivateRoute
                      authed={() =&gt; auth.isAuthenticated}
                      path="/dashboard"
                      component={Dashboard}
                  /&gt;
              &lt;/div&gt;
          );
      } else {
          return &lt;div&gt;&lt;/div&gt;
      }
    }
  }
  
  function mapStateToProps(state) {
    return {
      auth: state.auth
    }
  }
  
  export default withRouter(connect(mapStateToProps)(Routes));
  </code></pre>
  
  <p>it is implemented like this:</p>
  
  <pre><code>class Main extends Component {
  
  constructor(props) {
      super(props);
  }
  
  componentDidMount() {
      store.dispatch(checkAuth());
  }
  
  render() {
      return (
          &lt;Provider store={store}&gt;
              &lt;Router&gt;
                  &lt;Theme&gt;
                      &lt;Routes /&gt;
                  &lt;/Theme&gt;
              &lt;/Router&gt;
          &lt;/Provider&gt;
      );
    }
  }
  </code></pre>
  
  <p>This is the PrivateRoute:</p>
  
  <pre><code>export function PrivateRoute({ component: Component, authed, ...rest }) {
  const isAuthenticated = authed();
  return (
      &lt;Route
          {...rest}
          render={props =&gt;
              isAuthenticated === true ? (
                  &lt;Component {...props} /&gt;
              ) : (
                  &lt;Redirect
                      to={{
                          pathname: "/login",
                          state: { from: props.location }
                      }}
                  /&gt;
              )
          }
      /&gt;
    );
  }
  </code></pre>
  
  <p>What is the best way to pass that <code>auth</code> prop, is it ok if i connect the Routes component and pass the <code>auth</code> from there, or should i be passed from somewhere else, maybe connect each component that needs it and read from there? Also how would this approach play with nested routes, like <code>/dashboard/settings</code>? Thanks</p>