自己动手打造一款React路由守卫

最新推荐文章于 2025-06-22 18:04:31 发布

网安小陈

最新推荐文章于 2025-06-22 18:04:31 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_53312997/article/details/129307532

本文介绍了如何在React中创建路由守卫，模仿Vue的路由钩子功能，解决React路由权限验证的问题。通过保持路由数组不变，创建函数路由组件模拟守卫，以及在App.js中实现关键代码，实现了路由权限检查。示例代码详细展示了如何处理需要权限校验的路由，如登陆状态判断，并提供了完整的效果展示。

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

引言

用过vue的小伙伴都知道，vue自带路由守卫钩子并且巨他妈的好用，而对于react开发者来说，在需要路由权限校验时常常存在许多痛点问题。今天我将为大家打造一款属于我们reacter的路由守卫方法，希望可以为大家提供帮助。

react路由

大家先不要急，我们先温习下react基本的路由搭建过程。由于react路由统一管理不唯一，此处列举的是基于useRoutes的路由管理。

1. 下载安装

npm install react-router-dom@6

2. index.js挂载

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter,HashRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<BrowserRouter><App /></BrowserRouter>

);

3.定义路由数组

/router/index.js

import Page1 from "./../views/Page1";
import Page2 from "./../views/Page2";
import Login from "./../views/Login";
import NotFound from "./../views/404";
export default [{path:'/',element:<Page1/>,auth:false},{pa