advich-content-frontend/src/App.tsx

import { AuthProvider, useAuth } from "./contexts/AuthContext";
import { Spinner } from "@contentful/f36-components";
import { MenuProvider } from "./contexts/MenuContext";
import { RouterProvider } from "react-router-dom";
import { createAppRouter } from "./router";
import { isPublicRoute } from "./router/publicRoutes.tsx";
import { useMemo } from "react";

function AppRouter() {
  const { menus, loading } = useAuth();

  const router = useMemo(() => {
    const currentPath = window.location.pathname;
    
    // 如果在公开路由页面，创建包含公开路由的路由器
    if (isPublicRoute(currentPath)) {
      return createAppRouter([]);
    }

    // 对于受保护的路由，需要等待菜单数据加载
    if (menus.length === 0) {
      return null;
    }
    return createAppRouter(menus);
  }, [menus]);

  if (loading) {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "100vh",
        }}
      >
        <Spinner variant="primary" size="large"/>
      </div>
    );
  }

  if (!router) {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "100vh",
        }}
      >
        无可用菜单
      </div>
    );
  }

  return <RouterProvider router={router} />;
}

export default function App() {
  return (
    <AuthProvider>
      <MenuProvider>
        <AppRouter />
      </MenuProvider>
    </AuthProvider>
  );
}