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