32 lines
916 B
TypeScript
32 lines
916 B
TypeScript
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;
|