上面一篇文章主要书写了关于 mockjs 模拟请求动态菜单,并将数据结合 antd menu 组件组装成动态菜单的文章
# 🎉🎉🎉一文全面了解:一个神奇的 react-antd-admin 动态菜单
那么这篇文章就来讲述关于动态路由的组装
具体代码大家可以参考地址
主要分为动态路由:主要是从模拟后端请求回来的数据进行组装
静态路由就是供用户自己进行配置
动态路由
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
来定义。