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",
// element: LazyLoad("/rolelist/Rolelist"),
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"),
}
]
}
]
},
// 配置 无权限(404)
{
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;