为管理仪表板创建私有路由时出错

我尝试使用下面的代码来私有路由管理仪表板 我正在使用react-router-dom：6.2.2。我需要帮助来找出只能由管理员访问的私人路线。我尝试了 stackoverflow 中所有现有的解决方案。

app.js

    <BrowserRouter>
<Routes>
    <Route path="/admin/dashboard" element={<PrivateRouter><Dashboard /> </PrivateRouter>} />
   </Routes>
    </BrowserRouter>

私有 Router.js

        <Route
          {...rest}
          component={(props) => {
            const token = window.localStorage.getItem("userInfo");
            console.log(token)
            if (token) {
              return <Component {...props} />;
            } else {
              return <Navigate to={"/login"} />;
            }
          }}
        />
      );
    }

并在控制台上抛出错误

index.tsx:24 Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.
    at invariant (index.tsx:24:1)
    at Route (index.tsx:235:1)
    at renderWithHooks (react-dom.development)

路由器卫士功能：

const routerGuard = () => {
  const token = window.localStorage.getItem("userInfo")
  return !!token // if token exist, return true, else return false
}

您的路线在app.js

<Route path="/admin/dashboard" element={routerGuard() ? <Dashboard /> : <Navigate replace to="/login" />} />