title: React, Redux and Router authentication
body: <p>Don't know if this is a good question or not. However, I have been searching for hours and I cannot find a satisfactory answer for my problem. To keep things short, in my router, when I route to /dashboard; I want to check if the user is logged in. If the user is not logged in, I want to redirect him to my login page. Only problem, I am receiving my isAuthenticated(is logged in) variable from redux, which takes a second to load. Thus, whenever I check, my variable turns out to be null.</p>
  
  <p>Here is the code,</p>
  
  <pre><code>import React, { Component } from "react";
  import Home from "./pages/Home";
  import Testimonials from "./pages/Testimonials";
  import Pricing from "./pages/Pricing";
  import Login from "./pages/Login";
  import Register from "./pages/Register";
  import DashboardHome from "./pages/Dashboard/DashboardHome";
  import {
    BrowserRouter as Router,
    Switch,
    Route,
    Redirect
  } from "react-router-dom";
  import { connect } from "react-redux";
  import PropTypes from "prop-types";
  class AppRouter extends Component {
    static propTypes = {
      isAuthenticated: PropTypes.bool
    };
  
    render() {
      return (
        &lt;Router&gt;
          &lt;Switch&gt;
            &lt;Route path="/register"&gt;
              &lt;Register /&gt;
            &lt;/Route&gt;
            &lt;Route path="/login"&gt;
              &lt;Login /&gt;
            &lt;/Route&gt;
            &lt;Route path="/pricing"&gt;
              &lt;Pricing /&gt;
            &lt;/Route&gt;
            &lt;Route path="/testimonials"&gt;
              &lt;Testimonials /&gt;
            &lt;/Route&gt;
            &lt;Route path="/dashboard"&gt;
              this.props.isAuthenticated ?&lt;DashboardHome /&gt; :
              &lt;Redirect to="/login" /&gt;
            &lt;/Route&gt;
  
            &lt;Route path="/"&gt;
              &lt;Home /&gt;
            &lt;/Route&gt;
          &lt;/Switch&gt;
        &lt;/Router&gt;
      );
    }
  }
  
  const mapStateToProps = state =&gt; ({
    isAuthenticated: state.auth.isAuthenticated
  });
  export default connect(mapStateToProps, {})(AppRouter);
  </code></pre>
  
  <p>Much appreciation to anyone who helps out. Still new to react and redux.</p>