I want to show different headers when i get logged in

Question

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.

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 (
            <LoggedInRoutes />
        )
    }
    else {
        return (
            <HomeRoute />
        )
    }
}

export default App;

login form after which the app logs into home

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 (
            <BrowserRouter>
                <div>
                    <header>
                        <nav className="navbar">
                            <h1><NavLink to='/'>Dashboard </NavLink></h1>
                            <section className="main-nav">
                                <ul className="nav-items">
                                    <li className="nav-item">   <NavLink to='/customers'> Customers </NavLink></li>
                                    <li className="nav-item">   <NavLink to='/departments'> Departments </NavLink></li>
                                    <li className="nav-item">   <NavLink to='/employees'> Employees </NavLink></li>
                                    <Logout handleLogout={this.handleLogout} />
                                </ul>
                            </section>
                        </nav>
                    </header>

                    <Route path='/customers' exact={true} component={CustomerList} />
                    <Route path='/departments' component={DepartmentList} />
                    <Route path='/customers/new' component={CustomerNew} />
                    <Route path='/employee/new' component={EmployeeNew} />
                    <Route path='/employees' exact={true} component={EmployeesList} />
                    <Route path='/employees/:id' component={EmployeeShow} />
                    <Route path='/register' component={RegisterForm} />
                    <Route path='/logout' />
                    <Route path='/' exact={true} />
                </div>
            </BrowserRouter>
        )
    }
}
export default LoggedInRoutes

Answer 1

can you use it like below

import React from "react";
import { BrowserRouter, NavLink, Route, Switch } 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 Private from "path of private file"
import "../../App.css";

const ContentRoute = () => {
  return (
    <Switch>
      <Route path="/customers" exact={true} component={CustomerList} />
      <Route path="/departments" component={DepartmentList} />
      <Route path="/customers/new" component={CustomerNew} />
      <Route path="/employee/new" component={EmployeeNew} />
      <Route path="/employees" exact={true} component={EmployeesList} />
      <Route path="/employees/:id" component={EmployeeShow} />
    </Switch>
  );
};

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 (
      <div>
        <header>
          <nav className="navbar">
            <h1>
              <NavLink to="/">Dashboard </NavLink>
            </h1>
            <section className="main-nav">
              <ul className="nav-items">
                <li className="nav-item">
                  <NavLink to="/customers"> Customers </NavLink>
                </li>
                <li className="nav-item">
                  <NavLink to="/departments"> Departments </NavLink>
                </li>
                <li className="nav-item">
                  <NavLink to="/employees"> Employees </NavLink>
                </li>
                <Logout handleLogout={this.handleLogout} />
              </ul>
            </section>
          </nav>
        </header>
        <ContentRoute />
      </div>
    );
  }
}

const MainRoute = () => {
  return (
    <BrowserRouter>
      <Route path="/register" component={RegisterForm} />
      <Private component={LoggedInRoutes} />
    </BrowserRouter>
  );
};
export default MainRoute;

In the main route add those route where you don't need the header and in contentRoute add route with the header

and for app.js use

import React from "react";
import { Route, Redirect } from "react-router-dom";

const Private = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props => {
      const getToken = localStorage.getItem('token')
      if (!getToken) {
        return (
          <Redirect
            to={{
              pathname: "/login"
            }}
          />
        );
      } else {
        return <Component {...props} />;
      }
    }}
  />
);

export default Private;