title: I want to show different headers when i get logged in
body: <p>I am showing  headers as login, register when I am not logged in where as when i am logged in I want to show headers list as customers, departments etc. When I get logged in I am not able to se the headers as customers, departments it shows the headers as login, register until and unless I refresh the page.In app.js I have used a condition check to show loggedin headers or home headers when I get a token.I see that it is not rendering App.js on first call.</p>
  
  <pre><code>import React from 'react';
  import LoggedInRoutes from './components/routes/Loggedin-route';
  import HomeRoute from './components/routes/Home-route';
  
  function App() {
      const getToken = localStorage.getItem('token')
      if (getToken !== null) {
          return (
              &lt;LoggedInRoutes /&gt;
          )
      }
      else {
          return (
              &lt;HomeRoute /&gt;
          )
      }
  }
  
  export default App;
  </code></pre>
  
  <p>login form after which the app logs into home</p>
  
  <pre><code>import React from 'react';
  import { BrowserRouter, NavLink, Route, } from 'react-router-dom';
  import CustomerList from '../customer/List';
  import DepartmentList from '../department/List';
  import CustomerNew from '../customer/New';
  import EmployeeNew from '../employees/New';
  import EmployeesList from '../employees/List';
  import EmployeeShow from '../employees/EmployeeShow';
  import RegisterForm from '../auth/Register-form';
  import Logout from '../auth/Logout';
  import '../../App.css';
  
  class LoggedInRoutes extends React.Component {
      constructor() {
          super()
          this.handleLogout = this.handleLogout.bind(this)
      }
  
      handleLogout() {
          console.log(`logged out`)
          console.log(localStorage.getItem('token'))
          localStorage.removeItem('token')
      }
  
      render() {
          return (
              &lt;BrowserRouter&gt;
                  &lt;div&gt;
                      &lt;header&gt;
                          &lt;nav className="navbar"&gt;
                              &lt;h1&gt;&lt;NavLink to='/'&gt;Dashboard &lt;/NavLink&gt;&lt;/h1&gt;
                              &lt;section className="main-nav"&gt;
                                  &lt;ul className="nav-items"&gt;
                                      &lt;li className="nav-item"&gt;   &lt;NavLink to='/customers'&gt; Customers &lt;/NavLink&gt;&lt;/li&gt;
                                      &lt;li className="nav-item"&gt;   &lt;NavLink to='/departments'&gt; Departments &lt;/NavLink&gt;&lt;/li&gt;
                                      &lt;li className="nav-item"&gt;   &lt;NavLink to='/employees'&gt; Employees &lt;/NavLink&gt;&lt;/li&gt;
                                      &lt;Logout handleLogout={this.handleLogout} /&gt;
                                  &lt;/ul&gt;
                              &lt;/section&gt;
                          &lt;/nav&gt;
                      &lt;/header&gt;
  
                      &lt;Route path='/customers' exact={true} component={CustomerList} /&gt;
                      &lt;Route path='/departments' component={DepartmentList} /&gt;
                      &lt;Route path='/customers/new' component={CustomerNew} /&gt;
                      &lt;Route path='/employee/new' component={EmployeeNew} /&gt;
                      &lt;Route path='/employees' exact={true} component={EmployeesList} /&gt;
                      &lt;Route path='/employees/:id' component={EmployeeShow} /&gt;
                      &lt;Route path='/register' component={RegisterForm} /&gt;
                      &lt;Route path='/logout' /&gt;
                      &lt;Route path='/' exact={true} /&gt;
                  &lt;/div&gt;
              &lt;/BrowserRouter&gt;
          )
      }
  }
  export default LoggedInRoutes
  </code></pre>