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 (

          //实现重定向，/路由导航到/home路由
          } />
          //基本路由跳转，/login路由显示login组件
          }>
          //基本路由跳转，/home路由显示home组件
          }>

  );
}

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
      ) : (

      );
    }
  };
  return (

          } />
          }>
          , "home")}>

  );
}

export default App;

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

4. 对路由组件进行封装

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

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:,
    },
    {
        path: "/home",
        components:,
    },
]
export const routeGuard = (componets,path) => {
    if(path == "/login"){
        return components
    }else{
        return localStorage.getItem("token") ? componets :
    }
};

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

通过引入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 (

          {routes.map((item) => {
            return item.navigate ? (
              } />
            ) : (

            );
          })}

  );
}

export default App;

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