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

Question

尝试在项目中使用私有路由器进行反应 redux JWT auth 时出现一些问题。 当我尝试访问仪表板时，没有看到带有以下代码的 output。

 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;