完善路由动态加载

src/App.tsx

@@ -32,8 +32,6 @@ function App() {
     return <PageLoading/>
   }
 
-  console.log('app render', data)
-
   return (
     <ConfigProvider>
       <AppContextProvider value={{

src/components/page-loading/index.tsx

@@ -3,7 +3,7 @@ import { Spin } from 'antd'
 const PageLoading = () => {
   return (
     <>
-      <Spin spinning={true}>
+      <Spin spinning={true} size={'large'}>
         <div style={{ height: '100vh', width: '100vh' }}></div>
       </Spin>
     </>

src/pages/dashboard/index.tsx

@@ -1,5 +1,5 @@
 import { ProCard } from '@ant-design/pro-components'
-import { createFileRoute, createLazyFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from '@tanstack/react-router'
 
 
 const Index = () => {
@@ -19,7 +19,7 @@ const Index = () => {
   )
 }
 
-export const Route = createLazyFileRoute('/dashboard')({
+export const Route = createFileRoute('/dashboard')({
   component: Index,
 })
 export default Index

src/routes.tsx

@@ -5,17 +5,16 @@ import FetchLoading from '@/components/loading/FetchLoading.tsx'
 import PageLoading from '@/components/page-loading'
 import { Route as AuthenticatedImport } from '@/layout/_authenticated.tsx'
 import EmptyLayout from '@/layout/EmptyLayout.tsx'
-import ListPageLayout from '@/layout/ListPageLayout.tsx'
-import { Route as DashboardImport } from '@/pages/dashboard'
+// import ListPageLayout from '@/layout/ListPageLayout.tsx'
+// import { Route as DashboardImport } from '@/pages/dashboard'
 import { Route as LoginRouteImport } from '@/pages/login'
 import { generateUUID } from '@/utils/uuid.ts'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import {
     AnyRoute,
-  createLazyRoute,
     createRootRouteWithContext,
     createRoute,
-  createRouter,
+    createRouter, lazyRouteComponent,
     Outlet,
     redirect,
     RouterProvider,
@@ -42,7 +41,7 @@ const rootRoute = createRootRouteWithContext<IRootContext>()({
             <div>
                 <FetchLoading/>
                 <Outlet/>
-      <DevTools />
+                <DevTools/>
                 <TanStackRouterDevtools position={'bottom-right'}/>
             </div>
     ),
@@ -97,26 +96,26 @@ const loginRoute = LoginRouteImport.update({
     path: '/login',
     getParentRoute: () => emptyRoute,
 } as any)
-
-const menusRoute = createRoute({
-  getParentRoute: () => layoutAuthRoute,
-  path: '/system/menus',
-}).lazy(async () => await import('@/pages/system/menus').then(d => d.Route))
-
-const departmentsRoute = createRoute({
-  getParentRoute: () => layoutAuthRoute,
-  path: '/system/departments',
-}).lazy(async () => await import('@/pages/system/departments').then(d => d.Route))
-
-const usersRoute = createRoute({
-  getParentRoute: () => layoutAuthRoute,
-  path: '/system/users',
-}).lazy(async () => await import('@/pages/system/users').then(d => d.Route))
-
-const rolesRoute = createRoute({
-  getParentRoute: () => layoutAuthRoute,
-  path: '/system/roles',
-}).lazy(async () => await import('@/pages/system/roles').then(d => d.Route))
+//
+// const menusRoute = createRoute({
+//     getParentRoute: () => layoutAuthRoute,
+//     path: '/system/menus',
+// }).lazy(async () => await import('@/pages/system/menus').then(d => d.Route))
+//
+// const departmentsRoute = createRoute({
+//     getParentRoute: () => layoutAuthRoute,
+//     path: '/system/departments',
+// }).lazy(async () => await import('@/pages/system/departments').then(d => d.Route))
+//
+// const usersRoute = createRoute({
+//     getParentRoute: () => layoutAuthRoute,
+//     path: '/system/users',
+// }).lazy(async () => await import('@/pages/system/users').then(d => d.Route))
+//
+// const rolesRoute = createRoute({
+//     getParentRoute: () => layoutAuthRoute,
+//     path: '/system/roles',
+// }).lazy(async () => await import('@/pages/system/roles').then(d => d.Route))
 
 
 declare module '@tanstack/react-router' {
@@ -133,34 +132,34 @@ declare module '@tanstack/react-router' {
             preLoaderRoute: typeof layoutAuthRoute
             parentRoute: typeof rootRoute
         },
-    '/': {
-      preLoaderRoute: typeof DashboardImport
-      parentRoute: typeof layoutAuthRoute
-    },
-    '/dashboard': {
-      preLoaderRoute: typeof DashboardImport
-      parentRoute: typeof layoutAuthRoute
-    },
+        // '/': {
+        //     preLoaderRoute: typeof DashboardImport
+        //     parentRoute: typeof layoutAuthRoute
+        // },
+        // '/dashboard': {
+        //     preLoaderRoute: typeof DashboardImport
+        //     parentRoute: typeof layoutAuthRoute
+        // },
         '/login': {
             preLoaderRoute: typeof LoginRouteImport
             parentRoute: typeof rootRoute
         },
-    '/system/menus': {
-      preLoaderRoute: typeof menusRoute
-      parentRoute: typeof layoutAuthRoute
-    },
-    '/system/departments': {
-      preLoaderRoute: typeof departmentsRoute
-      parentRoute: typeof layoutAuthRoute
-    },
-    '/system/users': {
-      preLoaderRoute: typeof usersRoute
-      parentRoute: typeof layoutAuthRoute
-    },
-    '/system/roles': {
-      preLoaderRoute: typeof rolesRoute
-      parentRoute: typeof layoutAuthRoute
-    },
+        // '/system/menus': {
+        //     preLoaderRoute: typeof menusRoute
+        //     parentRoute: typeof layoutAuthRoute
+        // },
+        // '/system/departments': {
+        //     preLoaderRoute: typeof departmentsRoute
+        //     parentRoute: typeof layoutAuthRoute
+        // },
+        // '/system/users': {
+        //     preLoaderRoute: typeof usersRoute
+        //     parentRoute: typeof layoutAuthRoute
+        // },
+        // '/system/roles': {
+        //     preLoaderRoute: typeof rolesRoute
+        //     parentRoute: typeof layoutAuthRoute
+        // },
         '/welcome': {
             preLoaderRoute: typeof rootRoute
             parentRoute: typeof layoutAuthRoute
@@ -172,17 +171,15 @@ export const generateDynamicRoutes = (menuData: MenuItem[], parentRoute: AnyRout
     // 递归生成路由，如果有routes则递归生成子路由
 
     const generateRoutes = (menu: MenuItem, parentRoute: AnyRoute) => {
-    console.log('gen route', menu)
         const path = menu.path?.replace(parentRoute.options?.path, '')
         const isLayout = menu.children && menu.children.length > 0 && menu.type === 'menu'
 
         if (isLayout && (!menu.path || !menu.component)) {
             //没有component的layout，直接返回
-      console.log('no-page')
             return createRoute({
                 getParentRoute: () => layoutAuthRoute,
                 id: `/layout-no-path-${generateUUID()}`,
-        component: RootLayout,
+                component: EmptyLayout,
             })
         }
 
@@ -202,47 +199,22 @@ export const generateDynamicRoutes = (menuData: MenuItem[], parentRoute: AnyRout
             }
         }
 
-    console.log('gen route', options)
-
-    //删除掉parentRoute的path，避免重复
-    const route = createRoute(options).lazy(async () => {
-
-      // @ts-ignore 获取route中的menu属性
-      const menu = route.options.menu as MenuItem
         let component = menu.component
-
         // menu.type
         // 1,组件(页面)，2，IFrame，3，外链接，4，按钮
         if (menu.type === 'iframe') {
             component = '@/components/Iframe'
         }
 
-      if (!component) {
-        return createLazyRoute(options.path)({
-          component: () => <div>404 Not Found</div>
-        })
-      }
-
         //处理component路径
         component = component.replace(/^\/pages/, '')
         component = component.replace(/^\//, '')
 
-      console.log('load', `/pages/${component}`)
-      /* @vite-ignore */
-      const d = await import(`/pages/${component}`)
-      if (d.Route) {
-        console.log(d.Route)
-        return d.Route
-      }
-      if (d.GenRoute) {
-        return d.GenRoute(options.path)
-      }
-      return createLazyRoute(options.path)({
-        component: d.default || d
-      })
+        return createRoute({
+            ...options,
+            component: lazyRouteComponent(() => import(`./pages/${component}`)),
+            notFoundComponent: NotFound,
         })
-
-    return route
     }
 
     // 对menuData递归生成路由，只处理type =1 的菜单