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