将从受保护路由中的 useQuery 获取的 user prop 传递给其子组件

Question

我正在尝试将用户对象从受保护的路由传递给子级以在子组件中使用它，我怎样才能获得它？ “请注意，useGetCurrentUser 正在返回用户对象”

app.jsx

<Route
 path="/"
 element={
 <ProtectedRouteAdmin>
     <AdminLayout project={false} />
 </ProtectedRouteAdmin>
 }
>

ProtectedRouteAdmin.jsx

import { useGetCurrentUser } from "../../api/useAuth";

export const ProtectedRouteAdmin = ({ children }) => {
  const { data: user, isLoading, isError } = useGetCurrentUser();
  const navigate = useNavigate();
  console.log(isError);
  if (isError) {
    navigate("/login");
  }
  useEffect(() => {
    if (!user && !isLoading) {
      navigate("/login");
    } else if (user && user.isAdmin === false && !isLoading) {
      navigate("/dashboard");
    }
  }, [user, navigate]);

  return children;
};

export default ProtectedRouteAdmin;

AdminLayout.jsx

import { Outlet } from "react-router-dom";

const AdminLayout = () => {
  return (
    <Wrapper>
      <main className="dashboard">
        <SmallSideBar links={adminLinks} />
        <BigSidebar links={adminLinks} />
        <div>
          <Navbar />
          <div className="dashboard-page">
            <Outlet />
          </div>
        </div>
      </main>
    </Wrapper>
  );
};

export default AdminLayout;

Answer 1

也可以通过在 AdminLayout 中使用 useGetCurrentUser 钩子来解决！