How to create header or navbar with authentication in react | navbar navigation in react

Please follow this proper step to complete your requirements.

Step1: 

This is the app.js file. You can find complete code in git hub link https://github.com/AshutoshChoubey/DTRnodeReact/blob/master/my-app/src/App.js

  import React from "react";
  import { BrowserRouter as Router,Route } from "react-router-dom";
  import Login from "./components/Auth/Login";
  import Home from "./components/Home/home";
  // import Reminder from "./components/Reminder/reminder";
  import TaskList from "./components/TaskList/taskList";
  import TaskDetail from "./components/TaskList/taskDetail";
  import TaskForm from './components/Task/taskForm';
  import Register from "./components/Auth/Register";
  import GuestRoute from "./components/GuestRoute";
  import AuthRoute from "./components/AuthRoute";
  import Layout from "./components/Layout";
  import ForgetPassword from './components/Auth/forgetpassword';
  import ResetPassword from './components/Auth/resetPassword';
  import 'react-notifications/lib/notifications.css';
   
  function App() {
  return (
  <Router>
  <Layout>
  <div>
  <GuestRoute path="/login" component={Login} />
  <GuestRoute path="/register" component={Register} />
  <AuthRoute path="/task" component={TaskForm} />
  <AuthRoute path="/taskList" component={TaskList} />
  <AuthRoute path="/task-detail/:id" component={TaskDetail} />
  <GuestRoute path="/forget-password" component={ForgetPassword} />
  <GuestRoute path="/change-password/:slug" component={ResetPassword} />
  <AuthRoute path="/home" component={Home} />
  </div>
  <Route path="/" exact component={Home} />
  </Layout>
  </Router>
  );
  }
   
  export default App;

 

Step2: 

This is the Layout.jsx file. You can find complete code in git hub link https://github.com/AshutoshChoubey/DTRnodeReact/blob/master/my-app/src/components/Layout.jsx

  import React, { Fragment, useState } from "react";
  import { NavLink } from "react-router-dom";
  import { connect } from "react-redux";
  import logo from "../logo.png";
  function Layout(props) {
   
  const handleLogout = e => {
  e.preventDefault();
  localStorage.removeItem("token");
  localStorage.removeItem("user");
  props.logout();
  };
  const [pathname, setPathname] = useState('/');
  const checkActive = (match, location) => {
  if (!location) return false;
  setPathname(location.pathname);
  return pathname === "/" ? false : pathname === "/";
  }
  return (
  <div>
  <div className="navbar navbar-expand-lg bg-dark navbar-dark">
  <NavLink to="/" className="navbar-brand"><img className="rounded img-fluid" style={{ height: '40px', width: '40px' }} src={logo} alt="codeclouds logo" /></NavLink>
  <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span className="navbar-toggler-icon"></span>
  </button>
  <div className="collapse navbar-collapse" id="navbarSupportedContent">
   
  {props.loggedIn ? (
  <Fragment>
  <ul className="navbar-nav mr-auto">
  <li className={"nav-item " + (pathname === '/task' ? 'active' : '')} >
  <NavLink isActive={checkActive} to="/task" className="nav-link">Task</NavLink>
  </li>
  <li className={"nav-item " + (pathname === '/taskList' ? 'active' : '')}>
  <NavLink isActive={checkActive} to="/taskList" className="nav-link">TaskList</NavLink>
  </li>
  {/*
  •  
  Reminder
  */}
  </ul>
  <ul className="navbar-nav ml-auto">
  <li className={"nav-item " + (pathname === '/logout' ? 'active' : '')}>
  <NavLink isActive={checkActive}
  className="nav-link"
  to="/logout"
  onClick={handleLogout}
  >
  Logout
  </NavLink>
  </li>
  </ul>
  </Fragment>
  ) : (
  <Fragment>
  <ul className="navbar-nav ml-auto">
  <li className={"nav-item " + (pathname === '/login' ? 'active' : '')}>
  <NavLink isActive={checkActive} to="/login" className="nav-link">Login</NavLink>
  </li>
  <li className={"nav-item " + (pathname === '/register' ? 'active' : '')}>
  <NavLink isActive={checkActive} to="/register" className="nav-link">Register</NavLink>
  </li>
  <li className={"nav-item " + (pathname === '/forget-password' ? 'active' : '')}>
  <NavLink isActive={checkActive} to="/forget-password" className="nav-link">Forget Password</NavLink>
  </li>
  </ul>
  </Fragment>
  )}
   
   
  </div>
  </div>
  {props.children}
  </div >
  );
  }
   
  const mapStateToProps = state => {
  return {
  loggedIn: state.auth.loggedIn
  };
  };
   
  const mapDispatchToProps = dispatch => {
  return {
  logout: () => dispatch({ type: "SET_LOGOUT" })
  };
  };
  export default connect(
  mapStateToProps,
  mapDispatchToProps
  )(Layout);

 

Step3: 

This is the AuthRoute.js file. You can find complete code in git hub link https://github.com/AshutoshChoubey/DTRnodeReact/blob/master/my-app/src/components/AuthRoute.js

import { Route, Redirect } from "react-router-dom";
  import React from "react";
  import { connect } from "react-redux";
  const AuthRoute = ({ component: Component, ...rest }) => {
  return (
  <Route
  {...rest}
  render={props =>
  rest.loggedIn ? (
  <Component {...props} />
  ) : (
  <Redirect
  to={{
  pathname: "/login",
  state: { from: props.location }
  }}
  />
  )
  }
  />
  );
  };
   
  const mapStateToProps = state => {
  return {
  loggedIn: state.auth.loggedIn
  };
  };
  export default connect(mapStateToProps)(AuthRoute);

Step4: 

This is the GestRoute.js file. You can find complete code in git hub link https://github.com/AshutoshChoubey/DTRnodeReact/blob/master/my-app/src/components/GuestRoute.js

  import { Route, Redirect } from "react-router-dom";
  import React from "react";
  import { connect } from "react-redux";
   
  const GuestRoute = ({ component: Component, ...rest }) => {
  return (
  <Route
  {...rest}
  render={props =>
  !rest.loggedIn ? (
  <Component {...props} />
  ) : (
  <Redirect
  to={{
  pathname: "/home",
  state: { from: props.location }
  }}
  />
  )
  }
  />
  );
  };
   
  const mapStateToProps = state => {
  return {
  loggedIn: state.auth.loggedIn
  };
  };
  export default connect(mapStateToProps)(GuestRoute);

 

Step 5: Final step to watch the video where this code is explained.

 Next visite the youtube video where you will find this code explanation in detailed .

If you want to watch in the Hindi language then how to create navbar or header in react in hindi | React Navbar With Bootstrap 4 and authentication

If you want to watch in the Englishlanguage then How to create header or navbar with authentication in react in English | navbar navigation in react