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} />} />
            ) : (
              <Route
                path={item.path}
                element={routeGuard(item.components, item.path)}
              ></Route>
            );
          })}
        </Routes>
      </Router>
  );
}

export default App;

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