下载：
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)在存放路由的文件中，封装一个高阶组件
封装一个高阶组件（其实就是函数，这个函数要接收一个组件作为参数，返回一个组件）文章来源：https://www.toymoban.com/news/detail-802593.html
const AuthComponents = props => {
//获取到当前组件
const Com = props.children.type;
//列表token是否存在
if(sessionstorage.token){
return <Com />
}else{
return <Navigate to="/login">
}
}(3)当我们给首页加入一个拦截，就可以使用<AuthComponents></AuthComponents>包裹起来
例如：文章来源地址https://www.toymoban.com/news/detail-802593.html
{
path:'/home',
element:<AuthComponents><Home /></AuthComponents>
}到了这里，关于React导航守卫(V6路由)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
