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

JacksonChen_

已于 2024-03-28 16:43:00 修改

阅读量1.9k

点赞数 16

文章标签： react.js javascript 前端

于 2024-02-02 16:44:03 首次发布

本文链接：https://blog.csdn.net/chenyajundd/article/details/135914090

版权

本文介绍了如何在 React 中实现类似 Vue 的全局路由守卫功能。通过结合 ReactRoute 库，创建一个名为 UseAuth 的组件来处理路由守卫。需求包括：未登录时重定向至登录页，已登录时跳转至管理页面，以及未匹配路径时跳转至404页面。文章详细阐述了每个需求的实现逻辑，并提供了可能造成死循环的情况下的解决方案，以防止程序陷入死循环。最后，作者提供了源码供读者参考学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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

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

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

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

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

需求

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

进入博客管理系统，判断是否登录，未登录则跳转登录页（/login）
如果已经登录，则跳转管理页面（/mangement）
如果已经登录但是不能匹配到路径，则跳转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() {
  le

最低0.47元/天解锁文章