下載：
npm i react-router-dom當?shù)卿浿蟛趴梢匀ピL問其他頁面
(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)在存放路由的文件中，封裝一個高階組件
封裝一個高階組件（其實就是函數(shù)，這個函數(shù)要接收一個組件作為參數(shù)，返回一個組件）文章來源：http://www.zghlxwxcb.cn/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>包裹起來
例如：文章來源地址http://www.zghlxwxcb.cn/news/detail-802593.html
{
path:'/home',
element:<AuthComponents><Home /></AuthComponents>
}到了這里，關(guān)于React導(dǎo)航守衛(wèi)(V6路由)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
