🎉🎉🎉一文全面了解:一个神奇的 react-antd-admin 动态路由

上面一篇文章主要书写了关于 mockjs 模拟请求动态菜单,并将数据结合 antd menu 组件组装成动态菜单的文章

# 🎉🎉🎉一文全面了解:一个神奇的 react-antd-admin 动态菜单

那么这篇文章就来讲述关于动态路由的组装

具体代码大家可以参考地址

github.com/KenNaNa/rea...

主要分为动态路由:主要是从模拟后端请求回来的数据进行组装

静态路由就是供用户自己进行配置

动态路由

js 复制代码
import React from 'react'
import { Route, Outlet } from 'react-router-dom';

// 根据菜单数据生成动态路由
const generateRoutesFromMenu = (menuData: any[]) => {
    const routes: any[] = []
    menuData.forEach((menu) => {
      const Ele = React.lazy(() => import(`@/pages${menu.path}`))
      const element = menu.component === 'layout' ? <Outlet /> : <Ele />
      const route: Record<string, any> = {
        path: menu.path,
        key: menu.key,
        element: element,
      }
  
      if (menu.children && menu.children.length > 0) {
        route.children = generateRoutesFromMenu(menu.children);
      }
  
      routes.push(route);
    })
    return routes
  }
  

const DynamicRoutes = (dynamicMenuData: any) => {
    const menuData = generateRoutesFromMenu(dynamicMenuData)
    return menuData.map((item: any) => (
        <Route
          key={item.key}
          path={item.path}
          element={item.element}
        >
          {item.children && item.children.length && DynamicRoutes(item.children)}
        </Route>
      ));
  }
  
  export default DynamicRoutes

这段代码是一个使用React和React Router的动态路由生成工具,主要用于根据菜单数据生成动态的路由配置。下面是代码的解析:

  1. 首先,导入了React和React Router中的RouteOutlet组件。

  2. generateRoutesFromMenu函数是一个用于生成路由配置的函数,它接受一个菜单数据数组作为参数,并返回一个路由配置数组。这个函数的主要工作是遍历菜单数据,为每个菜单项生成一个路由配置,并将这些配置存储在一个数组中。

  3. generateRoutesFromMenu函数中,使用了forEach方法遍历传入的菜单数据数组。

  4. 对于每个菜单项,首先使用React.lazy来动态加载对应路径的React组件(这里使用了模板字符串,@/pages${menu.path}表示动态拼接导入的路径)。然后,根据菜单项的component属性,如果是'layout',则将路由元素设置为<Outlet />,否则将路由元素设置为动态加载的组件。

  5. 创建一个包含路由信息的对象route,包括pathkeyelement

  6. 如果菜单项有子菜单(menu.children存在且不为空),则递归调用generateRoutesFromMenu函数生成子路由配置,并将其添加到route对象的children属性中。

  7. 最后,将route对象添加到routes数组中,完成了路由配置的生成。

  8. DynamicRoutes函数是一个高阶组件,接受动态菜单数据作为参数。它调用了generateRoutesFromMenu函数来生成路由配置,并使用map方法遍历配置数组,为每个配置创建一个Route组件。

  9. 每个Route组件的keypathelement属性从路由配置中获取,并且如果有子路由配置,则递归调用DynamicRoutes函数以创建嵌套的路由。

  10. 最后,整个DynamicRoutes组件会返回一个包含动态生成路由的Route组件数组。

这段代码的主要作用是根据传入的菜单数据生成动态的路由配置,使得应用程序可以根据菜单内容自动创建路由,实现动态路由的功能。

静态路由

js 复制代码
import React from 'react';
import { Route, useRoutes } from 'react-router';
const About = React.lazy(() => import('@/pages/about'));
const Home = React.lazy(() => import('@/pages/home'));

// 静态路由在这里配置
const staticRouter = [
  {
    path: '/',
    key: 'home',
    element: <Home />
  },
  {
    path: '/home',
    key: 'home',
    element: <Home />,
  },
  {
    path: '/about',
    key: 'about',
    element: <About />,
  },
];


export default function StaticRoutes() {
  return staticRouter.map((item: any) => (
    <Route
      key={item.key}
      path={item.path}
      element={item.element}
    >
      {item.children && item.children.length && useRoutes(item.children)}
    </Route>
  ));
}

这段代码是一个使用React Router的路由配置文件,主要包括以下几个部分:

  1. 导入了React、RouteuseRoutes组件。React.lazy函数被用于异步加载React组件。

  2. 使用React.lazy动态导入了两个组件,AboutHome,分别代表应用中的两个页面。

  3. staticRouter数组中配置了静态路由信息。这些静态路由信息包括了每个路由的pathkeyelement属性。path表示路由的路径,key是路由的唯一标识,element表示路由所对应的React组件。

  4. StaticRoutes函数是一个React函数组件,用于生成静态路由配置。它通过map方法遍历staticRouter数组,为每个路由项创建一个Route组件。

  5. 对于每个路由项,Route组件的keypathelement属性从路由项的配置中获取。

  6. 如果路由项有子路由配置(item.children存在且不为空),则使用useRoutes函数来处理子路由配置。这意味着子路由配置会被递归处理,并嵌套在当前路由项下。

总结:这段代码用于配置静态路由,并且通过StaticRoutes函数生成React Router的路由配置。这样,可以在应用中使用这个路由配置来实现页面导航和路由匹配。静态路由的配置信息包括路径、键值和对应的React组件。如果需要嵌套路由,则可以在子路由的配置项中使用item.children来定义。

相关推荐
四喜花露水29 分钟前
Vue 自定义icon组件封装SVG图标
前端·javascript·vue.js
前端Hardy38 分钟前
HTML&CSS: 实现可爱的冰墩墩
前端·javascript·css·html·css3
web Rookie1 小时前
JS类型检测大全:从零基础到高级应用
开发语言·前端·javascript
Au_ust1 小时前
css:基础
前端·css
帅帅哥的兜兜1 小时前
css基础:底部固定,导航栏浮动在顶部
前端·css·css3
yi碗汤园1 小时前
【一文了解】C#基础-集合
开发语言·前端·unity·c#
就是个名称1 小时前
购物车-多元素组合动画css
前端·css
编程一生2 小时前
回调数据丢了?
运维·服务器·前端
丶21362 小时前
【鉴权】深入了解 Cookie:Web 开发中的客户端存储小数据
前端·安全·web
Missmiaomiao3 小时前
npm install慢
前端·npm·node.js