antd动态路由和菜单实现

1. 创建路由配置文件

在 src 目录下新建一个 routers 目录，并在其中创建一个 index.js 文件，用于存放路由配置。在 index.js 文件中，使用 react-router-dom 库中的 Switch 和 Route 组件来定义路由，如下所示：

import React from 'react';
import { Switch, Route } from 'react-router-dom';

import Home from '../pages/Home';
import About from '../pages/About';
import NotFound from '../pages/NotFound';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '*', component: NotFound },
];

function RouterConfig() {
  return (
    <Switch>
      {routes.map((route, i) => (
        <Route key={i} exact path={route.path} component={route.component} />
      ))}
    </Switch>
  );
}

export default RouterConfig;

在这个路由配置文件中，我们定义了三个路由，分别为首页（/）、关于页（/about）和 404 页面（*）。如果访问的 URL 不匹配任何路由，则会显示 404 页面。

2. 创建菜单组件

在 src 目录下新建一个 components 目录，并在其中创建一个 Menu.js 文件，用于存放菜单组件。在 Menu.js 文件中，使用 antd 库中的 Menu 和 Icon 组件来实现菜单，如下所示：

import React from 'react';
import { Link } from 'react-router-dom';
import { Menu, Icon } from 'antd';

const MenuItem = Menu.Item;

const menus = [
  { path: '/', name: '首页', icon: 'home' },
  { path: '/about', name: '关于', icon: 'info-circle' },
];

function MenuComponent() {
  return (
    <Menu theme="dark" mode="inline">
      {menus.map((menu, i) => (
        <MenuItem key={i}>
          <Link to={menu.path}>
            <Icon type={menu.icon} />
            <span>{menu.name}</span>
          </Link>
        </MenuItem>
      ))}
    </Menu>
  );
}

export default MenuComponent;

在这个菜单组件中，我们定义了两个菜单项，分别为首页和关于页。菜单项的图标和名称都是动态获取的，通过 menus 数组来配置。

3. 在 App.js 中使用路由和菜单

在 src 目录下的 App.js 文件中，使用 RouterConfig 组件来定义路由，使用 MenuComponent 组件来定义菜单，如下所示：

import React from 'react';
import { Layout } from 'antd';
import { BrowserRouter as Router } from 'react-router-dom';

import RouterConfig from './routers';
import MenuComponent from './components/Menu';

const { Header, Content, Sider } = Layout;

function App() {
  return (
    <Router>
      <Layout>
        <Header>Header</Header>
        <Layout>
          <Sider>
            <MenuComponent />
          </Sider>
          <Content>
            <RouterConfig />
          </Content>
        </Layout>
      </Layout>
    </Router>
  );
}

export default App;

在这个 App.js 文件中，我们将路由和菜单组件嵌套在 Layout 中，实现了动态路由和菜单的效果。当用户点击菜单项时，会跳转到相应的路由页面。如果访问的 URL 不匹配任何路由，则会显示 404 页面。