search

ant-design / ant-design-pro

👨🏻‍💻👩🏻‍💻 Use Ant Design like a Pro!
https://pro.ant.design
MIT License
36.51k stars 8.15k forks source link

🐛[BUG]左侧二级动态菜单，选择的菜单页面，F5刷新后，菜单页面不切换 #9700

Closed forgotwho closed 2 years ago

forgotwho commented 2 years ago

🐛 bug 描述

左侧二级动态菜单，选择的菜单页面，F5刷新后，菜单页面不切换。

📷 复现步骤

ant design pro V4版本 左侧二级菜单，例如 首页 菜单1 子菜单11 子菜单 12 菜单2 子菜单21 子菜单22

步骤

  1. 子菜单11，然后页面显示正常。
  2. 按F5刷新页面； 3.点击子菜单12，页面显示正常； 4.点击切换到子菜单11，菜单不切换，页面没反应。

发现当前页面的底部状态栏，当前菜单不显示URL链接，其他菜单显示。所以导致刷新后，再次切换到当前菜单，不响应点击事件。

🏞 期望结果

  1. 子菜单11，然后页面显示正常。
  2. 按F5刷新页面； 3.点击子菜单12，页面显示正常； 4.点击切换到子菜单11，菜单可以切换到子菜单11

💻 复现代码

{ "name": "tobacco-2020", "version": "5.0.0-alpha.0", "private": true, "description": "An out-of-box UI solution for enterprise applications", "scripts": { "analyze": "cross-env ANALYZE=1 umi build", "build": "umi build --max_old_space_size=4096", "deploy": "npm run site && npm run gh-pages", "dev": "npm run start:dev", "fetch:blocks": "pro fetch-blocks && npm run prettier", "gh-pages": "cp CNAME ./dist/ && gh-pages -d dist", "i18n-remove": "pro i18n-remove --locale=zh-CN --write", "postinstall": "umi g tmp", "lint": "umi g tmp && npm run lint:js && npm run lint:style && npm run lint:prettier", "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 && npm run lint:style", "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src", "lint:prettier": "prettier --check \"/*\" --end-of-line auto", "lint:style": "stylelint --fix \"src/*/.less\" --syntax less", "prettier": "prettier -c --write \"/*\"", "start": "umi dev", "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none umi dev", "start:no-mock": "cross-env MOCK=none umi dev", "start:no-ui": "cross-env UMI_UI=none umi dev", "start:pre": "cross-env REACT_APP_ENV=pre umi dev", "start:test": "cross-env REACT_APP_ENV=test MOCK=none umi dev", "pretest": "node ./tests/beforeTest", "test": "umi test", "test:all": "node ./tests/run-tests.js", "test:component": "umi test ./src/components", "tsc": "tsc" }, "husky": { "hooks": { "pre-commit": "npm run lint-staged" } }, "lint-staged": { "/*.less": "stylelint --syntax less", "*/.{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/charts": "^1.3.5", "@ant-design/icons": "^4.0.0", "@ant-design/pro-card": "^1.18.33", "@ant-design/pro-layout": "6.0.0-8", "@ant-design/pro-table": "^2.66.4", "@antv/data-set": "^0.11.4", "@antv/l7-react": "^2.1.9", "@antv/util": "^2.0.17", "@types/lodash.debounce": "^4.0.6", "@types/lodash.isequal": "^4.5.5", "antd": "^4.18.8", "bizcharts": "^3.5.3-beta.0", "bizcharts-plugin-slider": "^2.1.1-beta.1", "classnames": "^2.2.6", "dom-to-image": "^2.6.0", "gg-editor": "^2.0.2", "lodash": "^4.17.15", "lodash-decorators": "^6.0.0", "lodash.debounce": "^4.0.8", "lodash.isequal": "^4.5.0", "moment": "^2.25.3", "numeral": "^2.0.6", "nzh": "^1.0.3", "omit.js": "^1.0.2", "prop-types": "^15.5.10", "qs": "^6.9.0", "react": "^16.8.6", "react-dom": "^16.8.6", "react-fittext": "^1.0.0", "react-router": "^4.3.1", "umi": "^3.1.0", "umi-request": "^1.0.8", "use-merge-value": "^1.0.1", "uuid": "^8.3.2", "xlsx": "^0.16.9" }, "devDependencies": { "@ant-design/pro-cli": "^2.0.2", "@types/classnames": "^2.2.7", "@types/express": "^4.17.0", "@types/history": "^4.7.2", "@types/jest": "^26.0.0", "@types/lodash": "^4.14.144", "@types/qs": "^6.5.3", "@types/react": "^16.9.17", "@types/react-dom": "^16.8.4", "@types/react-helmet": "^5.0.13", "@umijs/fabric": "^2.0.5", "@umijs/plugin-blocks": "^2.0.5", "@umijs/plugin-esbuild": "^1.0.0-beta.2", "@umijs/preset-ant-design-pro": "^1.2.0", "@umijs/preset-react": "^1.4.24", "@umijs/preset-ui": "^2.1.11", "carlo": "^0.9.46", "cross-env": "^7.0.0", "cross-port-killer": "^1.1.1", "detect-installer": "^1.0.1", "eslint": "^7.2.0", "express": "^4.17.1", "gh-pages": "^3.0.0", "husky": "^4.0.7", "lint-staged": "^10.0.0", "mockjs": "^1.0.1-beta3", "prettier": "^2.0.1", "pro-download": "1.0.1", "puppeteer-core": "^3.0.0", "stylelint": "^13.0.0" }, "engines": { "node": ">=10.0.0" } }


export const layout = ({
  initialState,
}: {
    initialState: { settings?: LayoutSettings, menuData?:any };
}): BasicLayoutProps => {
  return {
    rightContentRender: () => <RightContent />,
    disableContentMargin: false,
    footerRender: () => <Footer />,
    logo:<img src = '/logo.png'/>,
    menuDataRender: () => getMenuDataRender(initialState?.menuData),
    ...initialState?.settings,
  };
};

export async function getInitialState(): Promise<{
  currentUser?: API.CurrentUser;
  settings?: LayoutSettings;
  menuData?: any;
}> {
  // 如果是登录页面，不执行
  if (history.location.pathname !== '/user/login') {
    try {
      const currentUser = await queryCurrentUser();
      let menuData = []
      if (currentUser) {
        const menuDataList = await queryMenuData();
        menuData = menuDataList.data;
      }
      let commonRoute = ["/",'/home','/settings','/scan/index.html']
      //判断是否有权限
      let hasRight = getRouteAuthority(history.location.pathname, menuData);

      if (!commonRoute.includes(history.location.pathname)) {
        if (!hasRight) {
          history.push('/exception/403');
        }
      }

      return {
        currentUser,
        settings: defaultSettings,
        menuData: menuData
      };
    } catch (error) {
      history.push('/user/login');
    }
  }
  return {
    settings: defaultSettings,
    menuData:[]
  };
}

© 版本信息

🚑 其他信息

chenshuai2144 commented 2 years ago

菜单没有加载回来之前不要渲染layout好了。

menuDataRender: () => getMenuDataRender(initialState?.menuData)。

我感觉是你的path不存在了。你试试 menuItemRender 渲染

forgotwho commented 2 years ago

export const layout = ({ initialState, }: { initialState: { settings?: LayoutSettings, menuData?:any }; }): BasicLayoutProps => { return { rightContentRender: () => , disableContentMargin: false, footerRender: () =>