十五）React项目实战记录：手写封装路由守卫

后台管理系统两种经典的跳转情况：

    1、如果访问的是登录页面， 并且有token， 跳转到首页；

    2、如果访问的不是登录页面，并且没有token， 跳转到登录页；

    3、其余的都可以正常放行。

而react没有路由守卫，需要自己手动封装。

在App.tsx里进行封装：

App.tsx：

import { useEffect } from 'react'
import { useRoutes, useLocation,useNavigate } from "react-router-dom"
import router from "./router"
import { message } from "antd"

// 去往登录页的组件
function ToLogin(){
  const navigateTo = useNavigate()
  // 加载完这个组件之后实现跳转
  useEffect(()=>{
    // 加载完组件之后执行这里的代码
    navigateTo("/login");
    message.warning("您还没有登录，请登录后再访问！");
  },[])
  return <div></div>
}
// 去往首页的组件
function ToPage1(){
  const navigateT