protected routes in reactjs
Navbar.js
import { Link, Route, Routes } from "react-router-dom"
import Home from './Home'
import Login from './Login'
import Profile from './Profile'
import Contact from './Contact'
import CreateToken from './Token.js'
import Protected from './Protected'
export default function Navbar() {
return (
<>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<Link class="navbar-brand" href="#">Navbar</Link>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<Link class="nav-link active" aria-current="page" to="/">Home</Link>
</li>
<li class="nav-item">
<Link class="nav-link active" to="/login">Login</Link>
</li>
<li class="nav-item">
<Link class="nav-link active" to="/profile">Profile</Link>
</li>
<li class="nav-item">
<Link class="nav-link active" to="/contact">Contact</Link>
</li>
</ul>
</div>
</div>
</nav>
<Routes>
<Route path="/" element={<Home />}></Route>
<Route path="/login" element={<Login />}></Route>
<Route path="/profile" element={<Protected Component={Profile} />} ></Route>
<Route path="/contact" element={<Contact />}></Route>
<Route path="/token" element={<CreateToken />}></Route>
</Routes>
</>
)
}
-------------------------------------------------------------------------------------------------------------------
Protected.js
import { useEffect } from "react";
import { useNavigate } from "react-router";
export default function Protected(props){
const {Component} = props;
const navigate = useNavigate();
useEffect(() => {
let login = localStorage.getItem("login_token");
if(!login){
navigate("/login");
}
})
return(
<>
<Component />
</>
)
}
------------------------------------------------------------------------------------------------------------------
Token.js
export default function Token(){
localStorage.setItem("login_token","brianlovemia");
return(
<>
<h3>token page</h3>
</>
)
}
