React实现路由,路由守卫

2024-08-26 16:28

本文主要是介绍React实现路由,路由守卫,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1. 下载install react-router-dom

react中实现路由需要依赖react-router-dom实现,通过如下命令下载

npm install react-router-dom

2. 引入组件,实现路由逻辑

我们要引入react-router-dom包中的BrowserRouter,Route,Routes,Navigate,并在app.jsx文件中书如下代码实现路由

import {BrowserRouter as Router,Route,Routes,Navigate,
} from "react-router-dom";
import Login from "./pages/login/login";
import Home from "./pages/home/home";
function App() {return (<Router><Routes>//实现重定向,/路由导航到/home路由<Route path="/" element={<Navigate to="/home" />} />//基本路由跳转,/login路由显示login组件<Route path="/login" element={<Login />}></Route>//基本路由跳转,/home路由显示home组件<Route path="/home" element={<Home />}></Route></Routes></Router>);
}export default App;

3. 实现路由守卫

在项目中,未登陆用户我们要限制其访问其他路由,但react没有提供一个路由守卫的功能,我们可以依赖高阶组件的特性实现路由守卫,代码如下

import {BrowserRouter as Router,Route,Routes,Navigate,
} from "react-router-dom";
import Login from "./pages/login/login";
import Home from "./pages/home/home";function App() {const routeGuard = (components, path) => {if (path == "/login") {return components;} else {return localStorage.getItem("token") ? (components) : (<Navigate to="/login" />);}};return (<Router><Routes><Route path="/" element={<Navigate to="/home" />} /><Route path="/login" element={<Login />}></Route><Route path="/home" element={routeGuard(<Home/>, "home")}></Route></Routes></Router>);
}export default App;

在上述代码中,我么通过定义了一个routeGuard的高阶组件,将作为Home组件和其路径作为参入传入,访问/home路由时,则会经过routeGuard高阶组件中定义的逻辑,在此逻辑中我们判断路径是否为/login,如果不是则继续判断缓存中是否含有token,如果有则返回对应组件,如果没有则重定向至/login。

4. 对路由组件进行封装

react路由相关功能作为组件来实现,会造成当前组件代码积累过多,看起来很乱,并且使用起来并不方便,我们可以通过进一步封装,来实现类似于Vue中的配置式路由.

1.首先创建一个route.jsx文件写入如下内容

import { Navigate } from "react-router-dom";import Login from "./pages/login/login";
import Home from "./pages/home/home";
export const routes = [{path: "/",navigate:"/home"},{path: "/login",components:<Login/>,},{path: "/home",components:<Home/>,},
]
export const routeGuard = (componets,path) => {if(path == "/login"){return components}else{return localStorage.getItem("token") ? componets : <Navigate to="/login" />}
};

其中routes数组记录了所有路由信息,而routeGuard则是我们定义的路由守卫。

2. 在app.jsx中遍历routes

通过引入routes文件中的素组进行遍历操作,生成Route组件,实现根据配置文件动态生成路由,并且目标组件通过routeGuard高阶组件包裹,实现路由守卫功能,代码如下

import {BrowserRouter as Router,Route,Routes,
} from "react-router-dom";
import Login from "./pages/login/login";
import Home from "./pages/home/home";
import { routes, routeGuard } from "@/router/router";function App() {return (<Router><Routes>{routes.map((item) => {return item.navigate ? (<Route path={item.path} element={<Navigate to={item.navigate} />} />) : (<Routepath={item.path}element={routeGuard(item.components, item.path)}></Route>);})}</Routes></Router>);
}export default App;

通过对路由的封装,可以使开发过程更加方便,代码更加整洁。并且减少代码体积,提高首屏渲染速度。 

这篇关于React实现路由,路由守卫的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1109075

相关文章

Redis分片集群的实现

《Redis分片集群的实现》Redis分片集群是一种将Redis数据库分散到多个节点上的方式,以提供更高的性能和可伸缩性,本文主要介绍了Redis分片集群的实现,具有一定的参考价值,感兴趣的可以了解一... 目录1. Redis Cluster的核心概念哈希槽(Hash Slots)主从复制与故障转移2.

springboot+dubbo实现时间轮算法

《springboot+dubbo实现时间轮算法》时间轮是一种高效利用线程资源进行批量化调度的算法,本文主要介绍了springboot+dubbo实现时间轮算法,文中通过示例代码介绍的非常详细,对大家... 目录前言一、参数说明二、具体实现1、HashedwheelTimer2、createWheel3、n

使用Python实现一键隐藏屏幕并锁定输入

《使用Python实现一键隐藏屏幕并锁定输入》本文主要介绍了使用Python编写一个一键隐藏屏幕并锁定输入的黑科技程序,能够在指定热键触发后立即遮挡屏幕,并禁止一切键盘鼠标输入,这样就再也不用担心自己... 目录1. 概述2. 功能亮点3.代码实现4.使用方法5. 展示效果6. 代码优化与拓展7. 总结1.

Mybatis 传参与排序模糊查询功能实现

《Mybatis传参与排序模糊查询功能实现》:本文主要介绍Mybatis传参与排序模糊查询功能实现,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧... 目录一、#{ }和${ }传参的区别二、排序三、like查询四、数据库连接池五、mysql 开发企业规范一、#{ }和${ }传参的

Docker镜像修改hosts及dockerfile修改hosts文件的实现方式

《Docker镜像修改hosts及dockerfile修改hosts文件的实现方式》:本文主要介绍Docker镜像修改hosts及dockerfile修改hosts文件的实现方式,具有很好的参考价... 目录docker镜像修改hosts及dockerfile修改hosts文件准备 dockerfile 文

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性,它们用于控制元素周围的空白区域,本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性,用于告诉浏览器某个元素在未来可能会发生哪些变化,本文给大家介绍CSSwill-change属性详解,感... will-change 是一个 css 属性,用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化

CSS去除a标签的下划线的几种方法

《CSS去除a标签的下划线的几种方法》本文给大家分享在CSS中,去除a标签(超链接)的下划线的几种方法,本文给大家介绍的非常详细,感兴趣的朋友一起看看吧... 在 css 中,去除a标签(超链接)的下划线主要有以下几种方法:使用text-decoration属性通用选择器设置:使用a标签选择器,将tex

基于SpringBoot+Mybatis实现Mysql分表

《基于SpringBoot+Mybatis实现Mysql分表》这篇文章主要为大家详细介绍了基于SpringBoot+Mybatis实现Mysql分表的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可... 目录基本思路定义注解创建ThreadLocal创建拦截器业务处理基本思路1.根据创建时间字段按年进

前端高级CSS用法示例详解

《前端高级CSS用法示例详解》在前端开发中,CSS(层叠样式表)不仅是用来控制网页的外观和布局,更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展,CSS的用法也日益丰富和高级,本文将深... 前端高级css用法在前端开发中,CSS(层叠样式表)不仅是用来控制网页的外观和布局,更是实现复杂交