react + react-router v6 + antd5实现动态路由和动态菜单

原创

已于 2024-05-11 10:10:32 修改 · 8k 阅读

82 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端

于 2024-04-17 09:57:38 首次发布

本文详细描述了作者在使用React和AntDesign5开发项目时，如何实现动态路由和动态菜单，包括菜单项的动态图标生成、动态路由配置以及处理刷新页面时的路由问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

最近在写一个练手的react后台项目，使用react-router v6 + antd5来实现动态路由和动态菜，在实现动态路由和动态菜单部分还是遇到了不少问题，但最后还是解决了大部分问题，今天就来分享了下我是如何实现并解决问题的

Github：react-admin-template

动态菜单

菜单是使用的antd5的菜单组件，在 4.20.0 版本后，提供了 <Menu items={[...]} /> 的简写方式，有更好的性能和更方便的数据组织方式，不再需要自行拼接 JSX

看了看官方示例，label和key是必须要有的，代表菜单项标题和菜单项的唯一标志

由于后端也是我来写，所以怎么方便怎么来，直接在后端整理好数据再返回给客户端，icon图标则由前端根据返回的标识字段ps_icon来创建

然后直接赋值给<Menu items={[...]} />就行了

const [menus, setMenus] = useState<any[]>([])
useEffect(() => {
    const { id } = localcache.getCacha('userinfo')
    // 获取菜单列表
    getMenus(id).then((res) => {
      setMenus(res.data.menus)
    })
}, [])

<Sider trigger={null} collapsible collapsed={collapsed} width={256}>
    {menus.length && (
      <Menu
        style={
  
  { height: '100%' }}
        defaultSelectedKeys={selectKey}
        defaultOpenKeys={openKey}
        mode="inline"
        theme={state.isDark ? 'dark' : 'light'}
        onClick={handleMenuOnClick}
        items={menus}
      />
    )}
  </Sider>

但是还缺少了菜单的图标，菜单的图标也是动态的，服务端返回的菜单列表中带有图标的标识，再根据标识动态的创建图标，首先需要先单独安装一下antd的图标npm install --save @ant-design/icons

创建一个处理菜单的ts文件，定义一个addIconToMenu方法来为菜单创建图标，方法接收一个数组并且根据图标表示递归创建图标

// menuTool.ts
import React from 'react'
import * as Icons from '@ant-design/icons'
const iconList: any = Icons

/**
 * 菜单列表添加icon
 * @param menuData 菜单列表
 * @returns
 */
export function addIconToMenu(menuData: any) {
   
   
  for (let i = 0; i < menuData.length; i++) {
   
   
    if (menuData[i].ps_icon) {
   
   
      menuData[i].icon = React.createElement(iconList[menuData[i].ps_icon])
    }

    if (menuData[i].children) {
   
   
      menuData[i].children = addIconToMenu(menuData[i].children)
    }
  }

  return menuData
}

在主页面导入这个方法传入服务端返回的菜单列表并执行，将返回的结果重新setState，图标就成功的动态创建出来了

// main.tsx
useEffect(() => {
   
   
    const {
   
    id } = localcache.getCacha('userinfo')
    getMenus(id).then((res) => {
   
   
      setMenus(addIconToMenu(JSON.parse(JSON.stringify(res.data.menus))))
    })
}, [])

动态路由

为什么需要动态路由呢，虽然可以根据自己角色的权限动态生成菜单，然后点击子菜单跳转不同的页面，但是这样防不了一些用户在地址栏去输入一些不属于自己权限的页面地址，所以路由也需要动态去生成

路由使用的是react-router v6的<HashRouter/>组件和useRouteshook，router文件夹中定义两个组件，分别是baseRouter和index组件，baseRouter组件负责定义一些基本的路由，index组件负责注册路由

// baseRouter.tsx
import {
   
    lazy } from 'react'
import type {
   
    RouteObject } from 'react-router-dom'
import {
   
    Navigate } from 'react-router-dom'
const Main = lazy(() => import('@/views/main'))
const Login = lazy(() => import('@/views/login'))
const NotFound = lazy(() => import('@/views/notFound'