React navigate router dom is not working when am trying to work on the react redux JWT auth for privateroute

Question

There are some issue when am trying to use private router for react redux JWT auth in the project. When am trying to access the dashboard am not seeing the output with the below code.

 import { BrowserRouter, Route, Routes } from "react-router-dom"; import { ToastContainer } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; import TopNav from "./components/TopNav"; import PrivateRoute from "./components/PrivateRoute"; // components import Home from "./booking/Home"; import Login from "./auth/Login"; import Register from "./auth/Register"; import Dashboard from "./user/Dashboard"; import DashboardSeller from "./user/DashboardSeller"; import NewHotel from "./hotels/NewHotel"; function App() { return ( <BrowserRouter> <TopNav /> <ToastContainer position="top-center" /> <Routes> <Route path="/" element={<Home />} /> <Route path="/login" element={<Login />} /> <Route path="/register" element={<Register />} /> <Route element={<PrivateRoute />}> <Route element={<Dashboard />} path="/dashboard" /> <Route element={<DashboardSeller />} path="/dashboard/seller" /> <Route element={<NewHotel />} path="/hotels/new" /> </Route> </Routes> </BrowserRouter> ); } export default App;

Answer 1

 import { Outlet, Navigate } from "react-router-dom"; const PrivateRoute = () => { let auth = { token: true }; return auth.token? <Outlet />: <Navigate to="/login" />; }; export default PrivateRoute;