React实现路由，路由守卫

本文主要是介绍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实现路由，路由守卫的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---