diff --git a/src/App.tsx b/src/App.tsx
index 5a9062b..7a9ff3b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -32,8 +32,6 @@ function App() {
return
}
- console.log('app render', data)
-
return (
{
return (
<>
-
+
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index 13c3967..697cde6 100644
--- a/src/pages/dashboard/index.tsx
+++ b/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
\ No newline at end of file
diff --git a/src/routes.tsx b/src/routes.tsx
index 20d67d1..3078702 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -5,20 +5,19 @@ 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,
- Outlet,
- redirect,
- RouterProvider,
+ AnyRoute,
+ createRootRouteWithContext,
+ createRoute,
+ createRouter, lazyRouteComponent,
+ Outlet,
+ redirect,
+ RouterProvider,
} from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/router-devtools'
import { memo } from 'react'
@@ -28,288 +27,261 @@ import { DevTools } from 'jotai-devtools'
export const queryClient = new QueryClient({
- defaultOptions: {
- queries: {
- retry: false,
+ defaultOptions: {
+ queries: {
+ retry: false,
+ }
}
- }
})
const rootRoute = createRootRouteWithContext()({
- component: () => (
-
-
-
-
-
-
-
- ),
- beforeLoad: ({ location }) => {
- if (location.pathname === '/') {
- return redirect({ to: '/dashboard' })
- }
- },
- loader: () => {
+ component: () => (
+
+
+
+
+
+
+
+ ),
+ beforeLoad: ({ location }) => {
+ if (location.pathname === '/') {
+ return redirect({ to: '/dashboard' })
+ }
+ },
+ loader: () => {
- },
- notFoundComponent: NotFound,
- pendingComponent: PageLoading,
- errorComponent: ({ error }) => ,
+ },
+ notFoundComponent: NotFound,
+ pendingComponent: PageLoading,
+ errorComponent: ({ error }) => ,
})
const emptyRoute = createRoute({
- getParentRoute: () => rootRoute,
- id: '/_empty',
- component: EmptyLayout,
+ getParentRoute: () => rootRoute,
+ id: '/_empty',
+ component: EmptyLayout,
})
const authRoute = AuthenticatedImport.update({
- getParentRoute: () => rootRoute,
- id: '/_authenticated',
+ getParentRoute: () => rootRoute,
+ id: '/_authenticated',
} as any)
const layoutNormalRoute = createRoute({
- getParentRoute: () => rootRoute,
- id: '/_normal_layout',
- component: RootLayout,
+ getParentRoute: () => rootRoute,
+ id: '/_normal_layout',
+ component: RootLayout,
})
const layoutAuthRoute = createRoute({
- getParentRoute: () => authRoute,
- id: '/_auth_layout',
- component: RootLayout,
+ getParentRoute: () => authRoute,
+ id: '/_auth_layout',
+ component: RootLayout,
})
const notAuthRoute = createRoute({
- getParentRoute: () => layoutNormalRoute,
- path: '/not-auth',
- component: NotPermission
+ getParentRoute: () => layoutNormalRoute,
+ path: '/not-auth',
+ component: NotPermission
})
// const dashboardRoute = DashboardImport.update({
-// path: '/dashboard',
-// getParentRoute: () => layoutAuthRoute,
+// path: '/dashboard',
+// getParentRoute: () => layoutAuthRoute,
// } as any)
const loginRoute = LoginRouteImport.update({
- path: '/login',
- getParentRoute: () => emptyRoute,
+ 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' {
- interface FileRoutesByPath {
- '/_authenticated': {
- preLoaderRoute: typeof AuthenticatedImport
- parentRoute: typeof rootRoute
- },
- '/_normal_layout': {
- preLoaderRoute: typeof layoutNormalRoute
- parentRoute: typeof rootRoute
- },
- '/_layout': {
- preLoaderRoute: typeof layoutAuthRoute
- parentRoute: typeof rootRoute
- },
- '/': {
- 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
- },
- '/welcome': {
- preLoaderRoute: typeof rootRoute
- parentRoute: typeof layoutAuthRoute
- },
- }
+ interface FileRoutesByPath {
+ '/_authenticated': {
+ preLoaderRoute: typeof AuthenticatedImport
+ parentRoute: typeof rootRoute
+ },
+ '/_normal_layout': {
+ preLoaderRoute: typeof layoutNormalRoute
+ parentRoute: typeof rootRoute
+ },
+ '/_layout': {
+ preLoaderRoute: typeof layoutAuthRoute
+ parentRoute: typeof rootRoute
+ },
+ // '/': {
+ // 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
+ // },
+ '/welcome': {
+ preLoaderRoute: typeof rootRoute
+ parentRoute: typeof layoutAuthRoute
+ },
+ }
}
export const generateDynamicRoutes = (menuData: MenuItem[], parentRoute: AnyRoute) => {
- // 递归生成路由，如果有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,
- })
- }
-
- // @ts-ignore 添加menu属性，方便后面获取
- const options = {
- getParentRoute: () => parentRoute,
- menu,
- } as any
-
- if (isLayout) {
- options.id = path ?? `/layout-${generateUUID()}`
- } else {
- if (!path) {
- console.log(`${menu.name}没有设置视图`)
- } else {
- options.path = path
- }
- }
-
- console.log('gen route', options)
+ // 递归生成路由，如果有routes则递归生成子路由
+
+ const generateRoutes = (menu: MenuItem, parentRoute: AnyRoute) => {
+ 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，直接返回
+ return createRoute({
+ getParentRoute: () => layoutAuthRoute,
+ id: `/layout-no-path-${generateUUID()}`,
+ component: EmptyLayout,
+ })
+ }
- //删除掉parentRoute的path，避免重复
- const route = createRoute(options).lazy(async () => {
+ // @ts-ignore 添加menu属性，方便后面获取
+ const options = {
+ getParentRoute: () => parentRoute,
+ menu,
+ } as any
+
+ if (isLayout) {
+ options.id = path ?? `/layout-${generateUUID()}`
+ } else {
+ if (!path) {
+ console.log(`${menu.name}没有设置视图`)
+ } else {
+ options.path = path
+ }
+ }
- // @ts-ignore 获取route中的menu属性
- const menu = route.options.menu as MenuItem
- let component = menu.component
+ let component = menu.component
+ // menu.type
+ // 1,组件(页面)，2，IFrame，3，外链接，4，按钮
+ if (menu.type === 'iframe') {
+ component = '@/components/Iframe'
+ }
- // menu.type
- // 1,组件(页面)，2，IFrame，3，外链接，4，按钮
- if (menu.type === 'iframe') {
- component = '@/components/Iframe'
- }
+ //处理component路径
+ component = component.replace(/^\/pages/, '')
+ component = component.replace(/^\//, '')
- if (!component) {
- return createLazyRoute(options.path)({
- component: () => 404 Not Found
+ return createRoute({
+ ...options,
+ component: lazyRouteComponent(() => import(`./pages/${component}`)),
+ notFoundComponent: NotFound,
})
- }
-
- //处理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 route
- }
-
- // 对menuData递归生成路由，只处理type =1 的菜单
- const did = (menus: MenuItem[], parentRoute: AnyRoute) => {
- return menus.filter((item) => item.type === 'menu').map((item, index) => {
- // 如果有children则递归生成子路由，同样只处理type =1 的菜单
- const route = generateRoutes(item, parentRoute)
+ }
- // console.log(route)
- if (item.children && item.children.length > 0) {
- const children = did(item.children, route)
- if (children.length > 0) {
- route.addChildren(children)
- }
- }
- route.init({ originalIndex: index })
- return route
- })
- }
+ // 对menuData递归生成路由，只处理type =1 的菜单
+ const did = (menus: MenuItem[], parentRoute: AnyRoute) => {
+ return menus.filter((item) => item.type === 'menu').map((item, index) => {
+ // 如果有children则递归生成子路由，同样只处理type =1 的菜单
+ const route = generateRoutes(item, parentRoute)
+
+ // console.log(route)
+ if (item.children && item.children.length > 0) {
+ const children = did(item.children, route)
+ if (children.length > 0) {
+ route.addChildren(children)
+ }
+ }
+ route.init({ originalIndex: index })
+ return route
+ })
+ }
- const routes = did(menuData, parentRoute)
+ const routes = did(menuData, parentRoute)
- parentRoute.addChildren(routes)
+ parentRoute.addChildren(routes)
}
const routeTree = rootRoute.addChildren(
- [
- //非Layout
- loginRoute,
- emptyRoute,
-
- //不带权限Layout
- layoutNormalRoute.addChildren([
- notAuthRoute,
- ]),
-
- //带权限Layout
- // dashboardRoute,
- authRoute.addChildren(
- [
- layoutAuthRoute
- /*.addChildren(
- [
- menusRoute,
- departmentsRoute,
- usersRoute,
- rolesRoute,
- ]
- ),*/
- ]),
- ]
+ [
+ //非Layout
+ loginRoute,
+ emptyRoute,
+
+ //不带权限Layout
+ layoutNormalRoute.addChildren([
+ notAuthRoute,
+ ]),
+
+ //带权限Layout
+ // dashboardRoute,
+ authRoute.addChildren(
+ [
+ layoutAuthRoute
+ /*.addChildren(
+ [
+ menusRoute,
+ departmentsRoute,
+ usersRoute,
+ rolesRoute,
+ ]
+ ),*/
+ ]),
+ ]
)
export const RootProvider = memo((props: { context: Partial }) => {
- generateDynamicRoutes(props.context.menuData ?? [], layoutAuthRoute)
+ generateDynamicRoutes(props.context.menuData ?? [], layoutAuthRoute)
- const router = createRouter({
- routeTree,
- context: { queryClient, menuData: [] },
- defaultPreload: 'intent'
- })
+ const router = createRouter({
+ routeTree,
+ context: { queryClient, menuData: [] },
+ defaultPreload: 'intent'
+ })
- return (
-
-
-
- )
+ return (
+
+
+
+ )
})
\ No newline at end of file