当我尝试处理私有路由的反应 redux JWT auth 时，反应导航路由器 dom 不起作用

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;