react router dom v6 private route
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 router react v6
import React from "react"; import { BrowserRouter, Routes, Route } from "react-router-dom"; function App() { let login = false; return ( <div className="App"> <BrowserRouter> {login ? ( <> <Routes> <Route path="/" element={<Dashboard />} /> </Routes> ) : ( <Routes> <Route path="/" element={<Login />} /> </Routes> )} </BrowserRouter> </div> ); } export default App;