🎉🎉🎉一文全面了解:一个神奇的 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来定义。

相关推荐
gqkmiss18 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃23 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰28 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye34 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm36 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You1 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生2 小时前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互