//主要利用routes和route组件实现
// 引入组件以及页面组件
import {
Routes,
Route,
Navigate,
useLocation,
useNavigate,
} from "react-router-dom";
import { lazy, Suspense, useEffect } from "react";
import { Box, Spinner, Text, Layer } from 'grommet';
const Frame = lazy(() => import('@/pages/Frame'))
const Home = lazy(() => import('@/pages/Home'))
const Serch = lazy(() => import('@/pages/Serch'))
const Logins = lazy(() => import('@/pages/Login'))
const Register = lazy(() => import('@/pages/Register'))
const Shoping = lazy(() => import('@/pages/Shoping'))
const Details = lazy(() => import('@/pages/Shoping/Details/index'))
const ClassIfication = lazy(() => import('@/pages/ClassIfication'))
const User = lazy(() => import('@/pages/User'))
const Texts = lazy(() => import('@/components/TabBar'))
const Password = lazy(() => import('@/pages/Password'))
//导出router组件
export const router = () => {
//配置路由拦截这里是从session拿去token
//声明路由信息用于监听路由
const location = useLocation()
let token = () => {
let token = sessionStorage.getItem('token')
return token ? true : false
}
const navgate = useNavigate()
//配置路由拦截器通过监听
useEffect(() => {
// console.log(location)
routes.forEach(element => {
if (element.path == location.pathname) {
if (element.meta.power && !token()) {
navgate('/login')
}
document.title = element.meta.title
} else {
if (element.chidren) {
element.chidren.forEach(element => {
if (element.path == location.pathname) {
if (element.meta.power && !token()) {
navgate('/login')
}
document.title = element.meta.title
}
});
}
}
});
}, [location])
//定义router数据
const routes = [
{
path: '/',
element: <Frame />,
meta: { title: '首页', power: false },
chidren: [
{
path: '/',
element: <Home />,
meta: { title: '首页', power: false },
},
{
path: '/home',
element: (<Home />),
meta: { title: '首页', power: false }
},
{
path: '/shoping',
element: (<Shoping />),
meta: { title: '购物车', power: false }
},
{
path: '/classification',
element: (<ClassIfication />),
meta: { title: '商品分类', power: false }
},
{
path: '/user',
element: (<User />),
meta: { title: '个人主页', power: false }
},
]
},
{
path: '/login',
element: (<Logins />),
meta: { title: '登录', power: false }
},
{
path: '/password',
element: (<Password />),
meta: { title: '忘记密码', power: false }
},
{
path: '/register',
element: <Register />,
meta: { title: '注册', power: false }
}, {
path: '/serch',
element: (<Serch />),
meta: { title: '搜索', power: false }
},
// 购物车页面商品详情
{
path: '/shoping/details',
element: (<Details />),
meta: { title: '商品详情', power: false }
},
]
// 通过routes遍历route数据实现动态路由组件
return (
<Routes>
{routes.map((item, i) => (
<Route key={item.path} path={item.path} element={<Suspense fallback={<Layer>
<Box
align="center"
justify="center"
gap="small"
direction="row"
alignSelf="center"
pad="large"
>
<Spinner />
<Text>Loading...</Text>
</Box>
</Layer>} >
{
item.element
}
</Suspense>}>
{item.chidren?.map((items, i) => (
i == 0 ? <Route key={items.path + i} path={items.path} element={
<Navigate to={item.chidren[1].path} />
} /> : <Route key={items.path} path={items.path} element={<Suspense fallback={<Layer>
<Box
align="center"
justify="center"
gap="small"
direction="row"
alignSelf="center"
pad="large"
>
<Spinner />
<Text>Loading...</Text>
</Box>
</Layer>} >
{
items.element
}
</Suspense>} />
))}
</Route>
))}
</Routes>
)
}
export default router
网友评论