1. http-proxy-middleware解决跨域

安装http-proxy-middleware

npm i --save http-proxy-middleware

新建setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api', 
    //请求接口以/api开头就转发到target 例如接口为 http://aa/api/bb
    createProxyMiddleware({
      target: 'http://aa',
      changeOrigin: true,
    })
  );
};

axios.get('/api/bb').then(res => {
    console.log(res.data)
})

2. 动态渲染菜单

在useEffect中获取接口数据

import React, { useState, useEffect } from 'react'

const [menu, setMenu] = useState([]);

useEffect(() => {
    axios.get('xxxx').then(res => {
      console.log(res.data);
      setMenu(res.data)
    })
  }, [])

引入antd Menu 渲染

import { Layout, Menu } from 'antd';


const renderMenu = (menuList) => {
return menuList.map(item => {
    //判断是否含有二级菜单
  if (item.children?.length > 0 && checkPagePermission(item)) {
    return (<SubMenu key={item.key} icon={item.icon} title={item.title} >
    //递归渲染
      {renderMenu(item.children)}
    </SubMenu>)
  }
  //checkPagePermission(item)判断菜单是否需要渲染
  return checkPagePermission(item) && (<Menu.Item key={item.key} icon={item.icon} onClick={() => {
    navigate(item.key)
  }}>{item.title}</Menu.Item>)
})
}



<Menu theme="dark" mode="inline">
    {renderMenu(menu)}
</Menu>

3. 滚动条样式

/* // 滚动条宽度 */
::-webkit-scrollbar {
  width: 6px;
}

/* // 滚动条轨道 */
::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}

/* // 小滑块 */
::-webkit-scrollbar-thumb {
  background: #40a0ff49;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #40a0ff;
}

4. 刷新展示上次菜单高亮

主要是Menu组件中defaultSelectedKeys和selectedKeys的区别

defaultSelectedKeys：初始选中的菜单项 key 数组

selectedKeys：当前选中的菜单项 key 数组

使用selectedKeys，Menu就变为非受控组件，设置selectedKeys为每次变化后最新的路径即可