react-router V6 版本的使用(自己封装了 Redirect等)
IndexRouter.js 使用useRoute 做全局路由的搭建,包括嵌套路由,路由重定向,路由拦截(自己封装),路由懒加载(做了一个简单的封装)等
import React from 'react' ;
import { useRoutes} from "react-router-dom" ;
import LazyLoad from "./Lazyload" ;
import NewsSandBox from "../views/NewsSandBox/NewsSandBox" ;
import AuthComponent from "./AuthComponent" ;
function IndexRouter ( props ) {
const routerElement = useRoutes ( [
{
path : "/" ,
element : < AuthComponent>
< NewsSandBox> < / NewsSandBox>
< / AuthComponent> ,
children : [
{
path : "/" ,
element : LazyLoad ( "/home/Home" )
} ,
{
path : "home" ,
element : LazyLoad ( "/home/Home" )
} ,
{
path : "user-manage" ,
element : LazyLoad ( "/userlist/Userlist" ) ,
children : [
{
path : "" ,
element : LazyLoad ( "/userlist/Userlist" )
} ,
{
path : "list" ,
element : LazyLoad ( "/userlist/Userlist" )
}
]
} ,
{
path : "right-manage" ,
children : [
{
path : "role" ,
element : LazyLoad ( "/right-manage/rolelist/Rolelist" ) ,
children : [
{
path : "" ,
element : LazyLoad ( "/right-manage/rolelist/Rolelist" ) ,
} ,
{
path : "list" ,
element : LazyLoad ( "/right-manage/rolelist/Rolelist" ) ,
}
]
} ,
{
path : "right" ,
element : LazyLoad ( "/right-manage/rightlist/Rightlist" ) ,
children : [
{
path : "" ,
element : LazyLoad ( "/right-manage/rightlist/Rightlist" ) ,
} ,
{
path : "list" ,
element : LazyLoad ( "/right-manage/rightlist/Rightlist" ) ,
}
]
}
]
} ,
{
path : "*" ,
element : LazyLoad ( "/nopermission/Nopermission" ) ,
}
]
} ,
{
path : "/login" ,
element : LazyLoad ( "/login/Login" )
} ,
{
path : "/sandbox" ,
element : LazyLoad ( "/NewsSandBox/NewsSandBox" ) ,
}
] ) ;
return (
routerElement
) ;
}
function IsAuth ( ) {
return localStorage. getItem ( "token" ) ? true : false ;
}
export default IndexRouter;
AuthComponent.js 实现路由拦截,看有没有 token,有token正常访问,没有 token 进入 login 页面
import Redirect from "./Redirect" ;
function AuthComponent ( { children} ) {
const isLogin = localStorage. getItem ( "token" ) ;
return isLogin ? children : < Redirect to= "/login" / >
}
export default AuthComponent;
LazyLoad.js :因为只使用 React.lazy 的话,会报警告,需要搭配 Suspense 中的fallback 使用,所以就进行了简单封装
import React from "react" ;
const LazyLoad = ( path ) => {
const Comp = React. lazy ( ( ) => import ( '../views' + path) ) ;
return (
< React. Suspense fallback= { < > 加载中< / > } >
< Comp> < / Comp>
< / React. Suspense>
)
}
export default LazyLoad
Redirect.js :V6版本移除了 Redirect ,所以为了使用方便,封装了一个简单的 Redirect
import React, { useEffect} from 'react' ;
import { useNavigate} from "react-router-dom" ;
function Redirect ( { to} ) {
const navigate = useNavigate ( ) ;
useEffect ( ( ) => {
navigate ( to, { replace : true } ) ;
} )
return null ;
}
export default Redirect;