60 lines
1.2 KiB
TypeScript
60 lines
1.2 KiB
TypeScript
import { Spin } from 'antd'
|
|
import { FC, ReactNode, Suspense, lazy } from 'react'
|
|
import { Navigate, RouteObject } from 'react-router-dom'
|
|
import { createHashRouter } from 'react-router-dom'
|
|
|
|
const Loading = () => (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
height: '100vh'
|
|
}}
|
|
>
|
|
<Spin size='large' />
|
|
</div>
|
|
)
|
|
|
|
export const LazyLoad = (Component: FC): ReactNode => {
|
|
return (
|
|
<Suspense fallback={<Loading />}>
|
|
<Component />
|
|
</Suspense>
|
|
)
|
|
}
|
|
|
|
const router: RouteObject[] = [
|
|
{
|
|
path: '/',
|
|
children: [
|
|
{
|
|
path: '/',
|
|
element: LazyLoad(lazy(() => import('@/pages/home')))
|
|
},
|
|
{
|
|
path: '/test1',
|
|
element: LazyLoad(lazy(() => import('@/pages/test1')))
|
|
},
|
|
{
|
|
path: '/test2',
|
|
element: LazyLoad(lazy(() => import('@/pages/test2')))
|
|
},
|
|
{
|
|
path: '/zh-en-translator',
|
|
element: LazyLoad(lazy(() => import('@/pages/zh-en-translator')))
|
|
},
|
|
{
|
|
path: '/404',
|
|
element: <>404</>
|
|
}
|
|
]
|
|
},
|
|
{
|
|
path: '*',
|
|
element: <Navigate to='/404' />
|
|
}
|
|
]
|
|
|
|
export default createHashRouter(router)
|