當我嘗試處理私有路由的反應 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;