React导航守卫(V6路由)

下载：

npm i react-router-dom

当登录之后才可以去访问其他页面

(1)在登录页面，我们点击登录的时候，保存一个token,在登录页面引入重定向useNavigate

import { useNavigate } from 'react-router-dom'
 
const navigate = useNavigate()
 
const login = () => {
    //点击登录时，存入token并重定向首页面
    sessionStorage.token = "123"
    navigate("/home")
}
 
<button type="button" onclick={login}>登录</button>

(2)在存放路由的文件中，封装一个高阶组件

封装一个高阶组件（其实就是函数，这个函数要接收一个组件作为参数，返回一个组件）

const AuthComponents = props => {
    //获取到当前组件
    const Com = props.children.type;
    //列表token是否存在
    if(sessionstorage.token){
        return <Com />
    }else{
        return <Navigate to="/login">
    }
}

(3)当我们给首页加入一个拦截，就可以使用<AuthComponents></AuthComponents>包裹起来

例如：

{
    path:'/home',
    element:<AuthComponents><Home /></AuthComponents>
}

​​​​​​​​​​​