React --5 封装路由前置路由守卫

App内

//引入路由的hooks--useRoutes
import {useEffect} from 'react'
import {useRoutes,useNavigate, useLocation} from "react-router-dom"
import router from './router/index'
// import {message} from 'antd'
// 1，判断用户是否登录了,登录了跳转主页，在地址栏不能再通过/login回到登录页面
 
function ToPage1(){
  let NavigateTo= useNavigate()
  useEffect(()=>{
    NavigateTo("/page1")
    // message.warning("您还未登录，请登录账号")
  },[])
  return <div></div>
}
// 2, 用户没有登录直接通过地址栏跳转，提示未登录且不能切换页面进行跳转
function ToLogin(){
  let NavigateTo= useNavigate()
  useEffect(()=>{
    NavigateTo("/login")
  },[])
  return <div></div>
}



function BeforeEach(){
  
 let Routerview =useRoutes(router)
 let Location=useLocation()
 let token=localStorage.getItem("token")
 
 // 1，判断用户是否登录了,登录了跳转主页，在地址栏不能再通过/login回到登录页面
 if(Location.pathname==="/login