private route in react js
const PrivateRoute = ({component: Component, ...rest}) => { const {isAuthenticated} = rest; return ( <Route {...rest} render={props => ( isAuthenticated ? ( <Component {...props}/> ) : ( <Redirect to={{ pathname: '/login', state: {from: props.location} }}/> ) )} /> ); }; PrivateRoute.propTypes = { isAuthenticated: PropTypes.bool.isRequired, }; function mapStateToProps(state) { return { isAuthenticated: state.user.isAuthenticated, }; } export default connect(mapStateToProps)(PrivateRoute);
Source: stackoverflow.com
react private routes
import { createContext } from "react"; import {BrowserRouter, Route, Routes} from "react-router-dom" import PrivateRoutes from "./privateRoutes/PrivateRoutes"; export const AuthContext = createContext(); function App() { return ( <BrowserRouter> <Routes> <Route exact element={<PrivateRoutes />}> <Route path="/items" element={<Items />} /> <Route path="/cart" element={<Cart />} /> <Route path="/wishlist" element={<Wishlist />} /> </Route> <Route path="/login" element={<Login />} /> <Route path="/create-profile" element={<CreateProfile />} /> </Routes> </BrowserRouter> ); } export default App; import React from 'react' import { Outlet, Navigate } from 'react-router-dom' import { AuthContext } from '../App'; export default function PrivateRoutes() { const userId = localStorage.getItem("userId"); const role = localStorage.getItem("role"); const loggedInUser = { userId, role } return ( <AuthContext.Provider value={loggedInUser}> {userId ? <Outlet /> : <Navigate to="/login" />}; </AuthContext.Provider> ) }
private routing in react
import React, { useEffect, useState } from "react"; import "./App.css"; import { Routes, Route, Navigate } from "react-router-dom"; // import Home from "./components/Home"; import Dashboard from "./components/Dashboard"; // import SignIn from "./components/SignIn"; // import PrivateRoute from "./components/PrivateRoute"; // import PublicRoute from "./components/PublicRoute"; import Auth from "./Pages/auth"; import Profile from "./Pages/profile"; const App3 = () => { const[auth,setAuth]=useState(null); useEffect(() => { let user = localStorage.getItem("user"); user && JSON.parse(user) ? setAuth(true) : setAuth(false); }, []); useEffect(() => { localStorage.setItem("user", auth); }, [auth]); return ( <Routes> {!auth && ( <Route path="/auth" element={<Auth authenticate={()=>setAuth(true)}/>} /> )} {auth && <> <Route path="/profile" element={<Profile logout={()=>setAuth(false)}/>} /> <Route path="/dashboard" element={<Dashboard/>} /> </> } <Route path="/dashboard" element={<Dashboard />}/> <Route path="*" element={<Navigate to={auth ? "/profile" : "/auth"} />} /> {/* <PublicRoute restricted={false} element={<Home/>} path="/" exact /> <PublicRoute restricted={true} element={<SignIn/>} path="/signin" exact /> <PrivateRoute element={<Dashboard />} path="/dashboard" exact /> */} </Routes> ); }; export default App3;