如何在 React 中实现全局路由守卫？

前言

使用过 vue 的小伙伴都知道，如果想在 vue 中实现全局路由守卫，只需要在 beforeEach 中写路由守卫逻辑即可。

但是如果使用 react 的话，应该怎么做呢？

在 react 中，其实是没有 beforeEach 的，如果需要实现路由守卫，需要结合 ReactRoute 路由库，自己手动搓一个路由守卫。

本篇文章作者会结合自己的博客管理系统所用到的路由守卫进行演示。

(文章篇幅较详细，想直接看代码的可以到最后去 clone 一份源码)

需求

我的这个管理系统对于路由守卫的要求相对简单，需求如下：

1. 进入博客管理系统，判断是否登录，未登录则跳转登录页（/login）
2. 如果已经登录，则跳转管理页面（/mangement）
3. 如果已经登录但是不能匹配到路径，则跳转404页面（/404）

最主要的功能还是1和2，如果你已经明白需求了，那就继续往下看吧！

实现

基本路由

如果不使用路由守卫，如何在 react 中实现路由？

文档如下：

 我们先按着文档实现一个基本的路由格式，在 app.tsx 中实现如下：

//app.tsx
import React from 'react'
import { BrowserRouter as Router } from 'react-router-dom'
import GetRouter from './components/getRouter'

const App = () => {
  return (
    <Router>
       <GetRouter />
    </Router>
  )
}

export default App

我简单的把路由信息进行了封装，下面是GetRouter 文件：

//./components/getRouter
import { useRoutes } from 'react-router-dom'
import routes from '../router'

export default function GetRouter() {
  let