React 导航守卫

最新推荐文章于 2024-09-25 00:07:26 发布

啊翔呀

最新推荐文章于 2024-09-25 00:07:26 发布

阅读量1.4k

点赞数 3

文章标签：前端 react.js

本文链接：https://blog.csdn.net/m0_64409387/article/details/124127374

版权

本文介绍了在React项目中如何使用路由拦截实现导航守卫，以确保在路由跳转时进行权限判断和用户登录状态检查。

摘要由CSDN通过智能技术生成

路由拦截

在实际项目开发过程中，路由之间的跳转必定涉及权限、用户是否登陆等限定条件的判定，故需要导航守卫来完成这一事项
我把路由配置写在了App.jsx中，也可以写在其他组件中。
上代码：

// App.jsx中

// import { BrowserRouter, Route, Routes } from 'react-router-dom'
import {
    HashRouter, Route, Routes } from 'react-router-dom'
import {
    Navigate } from 'react-router'
import Home from './views/Home'//首页
import Login from './views/Login'//登录