title: How to created Public Navbar and Protected Navbar with React and Redux?
body: <p>I have created two Navbar Public and Protected. When someone clicks on Login or Sign up the users will go to Login or Sign up page to fill in their informant. </p>
  
  <p>When someone going to Login or Sign up page. Theirs no form the page is blank. If anyone has some suggestions or advice.</p>
  
  <p><a href="https://i.stack.imgur.com/4eNeq.png" rel="nofollow noreferrer">Landing Page</a></p>
  
  <p><a href="https://i.stack.imgur.com/HguwX.png" rel="nofollow noreferrer">Login but it's blank</a></p>
  
  <p><strong>Public</strong></p>
  
  <pre><code>const Public = () =&gt; (//Created an public component Navbar
  
      &lt;Router&gt;
        &lt;Navbar expand="lg"&gt;
            &lt;Navbar.Brand href="/home"&gt;Kommonplaces&lt;/Navbar.Brand&gt;
  
            &lt;Navbar.Toggle aria-controls="basic-navbar-nav" /&gt;
            &lt;Navbar.Collapse id="basic-navbar-nav"&gt;
              &lt;Nav pullRight className="navright"&gt;
                &lt;NavItem eventKey={3} href="#"&gt;
                &lt;li className="RightNav"&gt;
                  &lt;Link to="/"&gt;Activities&lt;/Link&gt;
                &lt;/li&gt;&lt;/NavItem&gt;
                &lt;NavItem eventKey={4} href="#"&gt;
                &lt;li className="RightNav"&gt;
                  &lt;Link to="/"&gt;List Your Space&lt;/Link&gt;
                &lt;/li&gt;&lt;/NavItem&gt;
                &lt;NavItem eventKey={1} title="Item"&gt;
                &lt;li className="RightNav"&gt;
                  &lt;Route exact path="/login" component={Login}&gt;
                      &lt;Link to="/login"&gt;Log In&lt;/Link&gt;
                  &lt;/Route&gt;
                &lt;/li&gt;&lt;/NavItem&gt;
                &lt;NavItem eventKey={2} title="Item"&gt;
  
                &lt;li className="RightNav"&gt;
                  &lt;Route exact path="/register" component={Register}&gt;
                    &lt;Link to="/register"&gt;Sign Up&lt;/Link&gt;
                  &lt;/Route&gt;
                &lt;/li&gt;&lt;/NavItem&gt;
              &lt;/Nav&gt;
            &lt;/Navbar.Collapse&gt;
        &lt;/Navbar&gt;
      &lt;/Router&gt;
  
  );
  </code></pre>
  
  <p><strong>Protected</strong></p>
  
  <pre><code>const Protected = () =&gt; (//Created an Protected component Navbar
  
    &lt;Router&gt;
      &lt;Navbar expand="lg"&gt;
          &lt;Navbar.Brand href="/home"&gt;Kommonplaces&lt;/Navbar.Brand&gt;
  
          &lt;Navbar.Toggle aria-controls="basic-navbar-nav" /&gt;
          &lt;Navbar.Collapse id="basic-navbar-nav"&gt;
            &lt;Nav pullRight className="navright"&gt;
              &lt;NavItem eventKey={3} href="#"&gt;
              &lt;li className="RightNav"&gt;
                &lt;Link to="/"&gt;Become a Planner&lt;/Link&gt;
              &lt;/li&gt;&lt;/NavItem&gt;
              &lt;NavItem eventKey={4} href="#"&gt;
              &lt;li className="RightNav"&gt;
                &lt;Link to="/"&gt;Saved&lt;/Link&gt;
              &lt;/li&gt;&lt;/NavItem&gt;
              &lt;NavItem eventKey={1} title="Item"&gt;
              &lt;li className="RightNav"&gt;
                &lt;Link to="/"&gt;Events&lt;/Link&gt;
              &lt;/li&gt;&lt;/NavItem&gt;
              &lt;NavItem eventKey={2} title="Item"&gt;
              &lt;li className="RightNav"&gt;
                &lt;Link to="/"&gt;Help&lt;/Link&gt;
              &lt;/li&gt;&lt;/NavItem&gt;
            &lt;/Nav&gt;
          &lt;/Navbar.Collapse&gt;
      &lt;/Navbar&gt;
  &lt;/Router&gt;
  );
  </code></pre>
  
  <p><strong>App</strong></p>
  
  <pre><code>class App extends Component {
  
      render() {
          return (
            &lt;Provider store={store}&gt;
              &lt;Router&gt;
                &lt;div&gt;
                  &lt;Route path="/" component={Public} /&gt;
                  &lt;Route path="/login" component={Protected} /&gt;
                  &lt;Switch&gt; 
                    &lt;PrivateRoute exact path="/login" component={Protected} /&gt;
                  &lt;/Switch&gt;
                &lt;/div&gt;
              &lt;/Router&gt;
            &lt;/Provider&gt;
          )
      }
  }
  
  export default App;
  
  </code></pre>
  
  <p>PrivateRounte.js </p>
  
  <pre><code>import React from "react";
  import { Route, Redirect } from "react-router-dom";
  import { connect } from "react-redux";
  import PropTypes from "prop-types";
  
  const PrivateRoute = ({ component: Component, auth, ...rest }) =&gt; (
  
    &lt;Route
      {...rest}
      render={props =&gt;
        auth.isAuthenticated === true ? (
          &lt;Component {...props} /&gt;
        ) : (
          &lt;Redirect to="/login" /&gt;
        )
      }
    /&gt;
  );
  
  PrivateRoute.propTypes = {
    auth: PropTypes.object.isRequired
  };
  
  const mapStateToProps = state =&gt; ({
    auth: state.auth
  });
  
  export default connect(mapStateToProps)(PrivateRoute);
  
  </code></pre>