🎉🎉🎉一文全面了解：一个神奇的 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的动态路由生成工具，主要用于根据菜单数据生成动态的路由配置。下面是代码的解析：

首先，导入了React和React Router中的Route和Outlet组件。
generateRoutesFromMenu函数是一个用于生成路由配置的函数，它接受一个菜单数据数组作为参数，并返回一个路由配置数组。这个函数的主要工作是遍历菜单数据，为每个菜单项生成一个路由配置，并将这些配置存储在一个数组中。
在generateRoutesFromMenu函数中，使用了forEach方法遍历传入的菜单数据数组。
对于每个菜单项，首先使用React.lazy来动态加载对应路径的React组件（这里使用了模板字符串，@/pages${menu.path}表示动态拼接导入的路径）。然后，根据菜单项的component属性，如果是'layout'，则将路由元素设置为<Outlet />，否则将路由元素设置为动态加载的组件。
创建一个包含路由信息的对象route，包括path、key和element。
如果菜单项有子菜单（menu.children存在且不为空），则递归调用generateRoutesFromMenu函数生成子路由配置，并将其添加到route对象的children属性中。
最后，将route对象添加到routes数组中，完成了路由配置的生成。
DynamicRoutes函数是一个高阶组件，接受动态菜单数据作为参数。它调用了generateRoutesFromMenu函数来生成路由配置，并使用map方法遍历配置数组，为每个配置创建一个Route组件。
每个Route组件的key、path和element属性从路由配置中获取，并且如果有子路由配置，则递归调用DynamicRoutes函数以创建嵌套的路由。
最后，整个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的路由配置文件，主要包括以下几个部分：

导入了React、Route和useRoutes组件。React.lazy函数被用于异步加载React组件。
使用React.lazy动态导入了两个组件，About和Home，分别代表应用中的两个页面。
在staticRouter数组中配置了静态路由信息。这些静态路由信息包括了每个路由的path、key和element属性。path表示路由的路径，key是路由的唯一标识，element表示路由所对应的React组件。
StaticRoutes函数是一个React函数组件，用于生成静态路由配置。它通过map方法遍历staticRouter数组，为每个路由项创建一个Route组件。
对于每个路由项，Route组件的key、path和element属性从路由项的配置中获取。
如果路由项有子路由配置（item.children存在且不为空），则使用useRoutes函数来处理子路由配置。这意味着子路由配置会被递归处理，并嵌套在当前路由项下。

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