79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
import { useRoutes } from 'react-router-dom'
|
|
import './App.css'
|
|
import LayOut from './layout'
|
|
import ParentView from './ParentView'
|
|
import Loading from './Loading'
|
|
import currentRouter from './router'
|
|
import RouteInterception from './router/RouteInterception'
|
|
import { useDispatch, useSelector } from 'react-redux'
|
|
import { Suspense, lazy, useEffect, useState } from 'react'
|
|
const Views = import.meta.glob('./view/**/*.tsx')
|
|
const transferReactNode = (comp: string) => {
|
|
if (comp === 'Layout') {
|
|
return <LayOut />
|
|
} else if (comp === 'ParentView') {
|
|
return <ParentView />
|
|
} else {
|
|
const View = lazy((Views[`./view/${comp}.tsx`] as any))
|
|
return (
|
|
<RouteInterception filePath={comp}>
|
|
<Suspense fallback={<Loading />}>
|
|
<View />
|
|
</Suspense>
|
|
</RouteInterception>
|
|
)
|
|
}
|
|
}
|
|
|
|
function App() {
|
|
const routes: [] = useSelector((store: any) => store.permission)
|
|
const [allRoutes, setAllRoutes] = useState(currentRouter)
|
|
const element = useRoutes(allRoutes)
|
|
// 转换路由对象
|
|
const transferRouteObject = (routes: Array<any>) => {
|
|
const croutes = JSON.parse(JSON.stringify(routes))
|
|
if (croutes.length) {
|
|
const reactRoutes = croutes.map((route: any) => {
|
|
return {
|
|
path: route.path,
|
|
element: transferReactNode(route.component),
|
|
children: transferRoutesChild(route.children)
|
|
}
|
|
})
|
|
setAllRoutes([...allRoutes, ...deleteChildren(reactRoutes)])
|
|
}
|
|
}
|
|
// 处理子路由
|
|
const transferRoutesChild = (routes: Array<any>): Array<any> => {
|
|
return routes.map(route => {
|
|
return {
|
|
path: route.path,
|
|
element: transferReactNode(route.component),
|
|
children: route.children?.length ? transferRoutesChild(route.children) : []
|
|
}
|
|
})
|
|
}
|
|
// 删除children[]
|
|
const deleteChildren = (routes: Array<any>) => {
|
|
return routes.filter(route => {
|
|
if(route.children) {
|
|
if(route.children.length) {
|
|
deleteChildren(route.children)
|
|
}else {
|
|
delete route.children
|
|
}
|
|
}
|
|
return true
|
|
})
|
|
}
|
|
|
|
useEffect(() => {
|
|
transferRouteObject(routes)
|
|
}, [routes.length])
|
|
|
|
return element
|
|
}
|
|
|
|
export default App
|
|
|