import React, { useMemo } from 'react';
import { RouterProvider } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { createDynamicRouter } from './router';
import type { RootState } from './store';

/**
 * 应用根组件
 * 
 * 架构说明：
 * 1. 使用 createBrowserRouter 创建路由实例
 * 2. 路由实例在应用启动时基于菜单数据创建
 * 3. 登录后通过页面刷新重新创建路由（稳定可靠）
 * 
 * 注意：
 * React Router 6 的 createBrowserRouter 是静态的
 * 不支持运行时动态替换路由实例
 * 如需动态路由，登录后必须刷新页面
 */
const App: React.FC = () => {
  const menus = useSelector((state: RootState) => state.user.menus);

  // 根据菜单状态创建路由
  const router = useMemo(() => {
    return createDynamicRouter();
  }, [menus]);

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

export default App;