Antd Pro V6 动态菜单和路由如何实现

Question

自己做一个前端项目练手，卡壳了。
框架是Antd Pro v6，要实现的功能是，用户登入后，根据从后端获取菜单（后端已根据用户权限做了过滤，只返回该用户可操作的菜单），菜单可以正常展示，但是点击后会报404，因为没有在routes.ts里配置相应的路由，想要的效果就是实现根据菜单动态的生成路由，不要在routes.ts里写死。网上各种搜索，均未搞定。求指点，有酬谢。
注意用的Antd Pro 是v6版本的，package.json 如下所示：

```javascript
{
  "name": "ant-design-pro",
  "version": "6.0.0",
  "private": true,
  "description": "An out-of-box UI solution for enterprise applications",
  "scripts": {
    "prepare": "husky install",
    "analyze": "cross-env ANALYZE=1 max build",
    "build": "max build",
    "deploy": "npm run build && npm run gh-pages",
    "dev": "npm run start:dev",
    "gh-pages": "gh-pages -d dist",
    "i18n-remove": "pro i18n-remove --locale=zh-CN --write",
    "postinstall": "max setup",
    "jest": "jest",
    "lint": "npm run lint:js && npm run lint:prettier && npm run tsc",
    "lint-staged": "lint-staged",
    "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ",
    "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src ",
    "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
    "lint:prettier": "prettier -c --write \"**/**.{js,jsx,tsx,ts,less,md,json}\" --end-of-line auto",
    "openapi": "max openapi",
    "prepare": "husky install",
    "prettier": "prettier -c --write \"**/**.{js,jsx,tsx,ts,less,md,json}\"",
    "preview": "npm run build && max preview --port 8000",
    "record": "cross-env NODE_ENV=development REACT_APP_ENV=test max record --scene=login",
    "serve": "umi-serve",
    "start": "cross-env UMI_ENV=dev max dev",
    "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev max dev",
    "start:no-mock": "cross-env MOCK=none UMI_ENV=dev max dev",
    "start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=dev max dev",
    "start:test": "cross-env REACT_APP_ENV=test MOCK=none UMI_ENV=dev max dev",
    "test": "jest",
    "test:coverage": "npm run jest -- --coverage",
    "test:update": "npm run jest -- -u",
    "tsc": "tsc --noEmit"
  },
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js",
    "**/*.{js,jsx,tsx,ts,less,md,json}": [
      "prettier --write"
    ]
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 10"
  ],
  "dependencies": {
    "@ant-design/icons": "^4.8.1",
    "@ant-design/pro-components": "^2.8.9",
    "@fortawesome/fontawesome-svg-core": "^6.7.2",
    "@fortawesome/free-solid-svg-icons": "^6.7.2",
    "@fortawesome/react-fontawesome": "^0.2.2",
    "@umijs/route-utils": "^2.2.2",
    "@xyflow/react": "^12.7.0",
    "antd": "^5.26.0",
    "antd-style": "^3.6.1",
    "classnames": "^2.5.1",
    "lodash": "^4.17.21",
    "moment": "^2.30.1",
    "omit.js": "^2.0.2",
    "querystring": "^0.2.1",
    "rc-menu": "^9.12.4",
    "rc-util": "^5.38.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-helmet-async": "^1.3.0"
  },
  "devDependencies": {
    "@ant-design/pro-cli": "^3.3.0",
    "@testing-library/react": "^13.4.0",
    "@types/classnames": "^2.3.1",
    "@types/express": "^4.17.21",
    "@types/history": "^4.7.11",
    "@types/jest": "^29.5.11",
    "@types/lodash": "^4.14.202",
    "@types/react": "^18.2.48",
    "@types/react-dom": "^18.2.18",
    "@types/react-helmet": "^6.1.11",
    "@umijs/fabric": "^2.14.1",
    "@umijs/lint": "^4.1.1",
    "@umijs/max": "^4.3.16",
    "@umijs/route-utils": "^4.0.1",
    "umi-presets-pro": "^2.0.3",
    "cross-env": "^7.0.3",
    "eslint": "^8.56.0",
    "express": "^4.18.2",
    "gh-pages": "^3.2.3",
    "husky": "^7.0.4",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "lint-staged": "^10.5.4",
    "mockjs": "^1.1.0",
    "prettier": "^2.8.8",
    "react-dev-inspector": "^1.9.0",
    "swagger-ui-dist": "^4.19.1",
    "ts-node": "^10.9.2",
    "typescript": "^5.3.3",
    "umi-serve": "^1.9.11"
  },
  "engines": {
    "node": ">=12.0.0"
  }
}

```

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

Antd Pro V6 动态菜单和路由实现

你遇到的问题是，使用 Antd Pro V6 实现动态菜单和路由，但是点击菜单项后报错 404。

解决方案：

1. 在 Antd Pro V6 中，菜单项的 key 属性需要与路由的 path 属性保持一致。
2. 在菜单项的 onClick 事件中，使用 useHistory hook 获取当前的路由对象，然后使用 push 方法跳转到新的路由。
3. 在路由配置中，使用 exact 属性来指定路由的匹配规则。

以下是一个简单的示例代码：

import { Menu, Button } from 'antd';
import { useHistory } from 'react-router-dom';

const MenuItems = () => {
  const history = useHistory();
  const menuItems = [
    {
      key: '/dashboard',
      label: '首页',
    },
    {
      key: '/settings',
      label: '设置',
    },
  ];

  const handleClick = (item) => {
    history.push(item.key);
  };

  return (
    <Menu
      theme="dark"
      mode="horizontal"
      defaultSelectedKeys={['/dashboard']}
      items={menuItems.map((item) => (
        <Menu.Item key={item.key} onClick={() => handleClick(item)}>
          {item.label}
        </Menu.Item>
      ))}
    />
  );
};

在上面的代码中，我们使用 useHistory hook 获取当前的路由对象，然后在 handleClick 函数中使用 push 方法跳转到新的路由。

在路由配置中，我们使用 exact 属性来指定路由的匹配规则：

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

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/dashboard" component={Dashboard} />
        <Route path="/settings" component={Settings} />
      </Switch>
    </BrowserRouter>
  );
};

在上面的代码中，我们使用 exact 属性来指定 /dashboard 路由的匹配规则为精确匹配。

希望这个示例代码能够帮助你解决问题。如果你还有其他问题，请随时问我。