Browse Source

完善路由动态加载

main
dark 7 months ago
parent
commit
c74e7433dd
  1. 2
      src/App.tsx
  2. 2
      src/components/page-loading/index.tsx
  3. 4
      src/pages/dashboard/index.tsx
  4. 134
      src/routes.tsx

2
src/App.tsx

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

2
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>
</>

4
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

134
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 的菜单

Loading…
Cancel
Save