公司网站 seo,建设政务门户网站的基本意义,建设银行支付宝网站,做网站视频一般上传到哪里简单介绍下项目背景#xff0c;我这里做了一个demo#xff0c;前端使用mock数据#xff0c;然后实现简单的路由拦截#xff0c;校验session是否包含用户作为已登录的依据#xff0c;react-router-dom是v6。不像vue可以设置登录拦截beforeenter#xff0c;react需要我们自…简单介绍下项目背景我这里做了一个demo前端使用mock数据然后实现简单的路由拦截校验session是否包含用户作为已登录的依据react-router-dom是v6。不像vue可以设置登录拦截beforeenterreact需要我们自己加。
//router.js
import React, { lazy } from react;
import { Navigate } from react-router-domconst Error lazy(() import(/pages/Error/Error.jsx))
const Index lazy(() import(/pages/Index/Index.jsx))
const Login lazy(() import(/pages/Login/Login.jsx))export const routes [{path: /,element: Navigate to/index/},{path: /login,element: Login /},{path: /index,element: Index /},{path: *,element: Error /},
]
import React, { useEffect, Suspense } from react
import { useRoutes, useNavigate } from react-router-dom
import { routes } from ./routerexport default function Index() {const element useRoutes(routes)return (Authen route{element} children{element.children}Suspensediv{element}/div/Suspense/Authen)}
//实现路由拦截
const Authen (props) {const navigate useNavigate()const { route, children } propsconst username sessionStorage.getItem(username)console.log(props);useEffect(() {if (route.props.match.pathname /login username) {navigate(/index)}}, [route, navigate,username])return children
}
Surpense组件是react组件懒加载的时候路由跳转了由于网络原因组件内容无法及时过去不添加会报错。
