在使用react写路由守卫的时候需要明白:如果没有满足条件跳转登录页面,否则正常跳转
1、先下载安装包 npm i react-router-dom
npm i react-router-dom
2、使用路由属性Navigate进行路由跳转,导入属性
import { Navigate } from "react-router-dom"
3、封装一个路由守卫函数
function Hoc_login(Com){
}
export default Hoc_login;
4、返回你传输的路由 ,先通过获取本地存储的登录密钥,判断是否存在,如果存在就正常跳转,否则就使用Navigate跳转到登录页面
function Hoc_login(Com){
return (props)=>{
let token=sessionStorage.getItem('token')
if(token){
return <Com {...props}></Com>
}else{
return <Navigate to='/login'></Navigate>
}
}
}