当前位置：首页 > news >正文

react+andDesign+vite+ts从零搭建后台管理系统(二)-reactRouter

news 2025/10/10 10:34:06

在这里插入图片描述

router安装

react-router官网

npm i react-router-dom

文件创建

在项目目录下创建对应的router文件夹，创建对应的文件
在这里插入图片描述

modules文件

将所有菜单菜单以一级目录拆成多个文件，使用import.meta.glob将路由模块批量导入

单个文件的配置

import Layout from '@/layouts/index';
// 系统设置
import File from '@/views/system/File/index'
import Dict from '@/views/system/dict/index'
import DictItem from '@/views/system/dictItem'const SystemSettingRouter = [{meta: { title: '系统设置'},element: <Layout />,children: [{path: '/system/file',meta: {title: '文件管理',requiresAuth: true},element: <File />},{path: '/system/dict',meta: { title: '数据字典',requiresAuth: true,},element: <Dict />},{path: '/system/dictItem',meta: { title: '数字字典项',requiresAuth: true,hidden: true},element: <DictItem />}]},
]export default SystemSettingRouter

routes文件

import type { RouteObject } from '@/router/interface'
import Login from '@/views/Login/index'// 导入所有router
const metaRouters = import.meta.glob('./modules/*.tsx', { eager: true })
// * 处理路由
export const routerArray: RouteObject[] = [];
Object.keys(metaRouters).forEach(item => {const moduleRoutes = metaRouters[item] as Record<string, any>;Object.keys(moduleRoutes).forEach((key: any) => {if (Array.isArray(moduleRoutes[key])) {routerArray.push(...moduleRoutes[key]);}});
});
export const routes: RouteObject[] = [{path: '/login',meta: { requiresAuth: false,title: '登录',},element: <Login />},...routerArray,
]

router入口文件 index.tsx

import { useRoutes, type RouteObject } from "react-router-dom";
import { routes } from './routes'
const Router = () => {const router = useRoutes(routes as RouteObject[]);return router;
};export default Router

路由守卫

使用高阶组件(AuthRouter)进行对需要鉴权的路由进行包裹

import { useLocation, Navigate } from "react-router-dom";
import { searchRoute } from "@/utils";
import { getToken } from '@/utils/auth'
import { routes } from "@/router/routes";const AuthRouter = (props) => {const { pathname } = useLocation();const route = searchRoute(pathname, routes);// * 判断当前路由是否需要访问权限(不需要权限直接放行)if (!route.meta?.requiresAuth) return props.children;  // 判断是否有tokenif (!getToken()) return <Navigate to="/login" replace />;return props.children
}export default AuthRouter;

根目录文件 App.tsx

import Router from "@/router/index"
import AuthRouter from "@/router/utils/AuthRouter"
import { HashRouter } from "react-router-dom";
const App = () => {return (<HashRouter><AuthRouter><Router /></AuthRouter></HashRouter>)
}