-
Notifications
You must be signed in to change notification settings - Fork 235
🐛[BUG] menuDataRender采用后台获取左侧菜单,第一次进入以及刷新页面,选中菜单未高亮 #587
Description
🐛 bug 描述 [详细地描述 bug,让大家都能理解]
menuDataRender采用后台获取左侧菜单,第一次进入以及刷新页面,选中菜单未高亮
当采用config中配置的,页面一切正常,只有在后台动态返回的情况会出现菜单未高亮的情况
📷 复现步骤 [清晰描述复现步骤,让别人也能看到问题]
启动项目,页面进入时,默认选中路由 ‘/’,重定向至 ‘Welcome’, 但左侧菜单未高亮显示;对菜单某一个项点击选中时,此时出现高亮,接着在该高亮页面进行浏览器刷新操作,左侧菜单无法高亮,并且所有菜单折叠收起。
🏞 期望结果 [描述你原本期望看到的结果]
高亮正常
💻 复现代码 [提供可复现的代码,仓库,或线上示例]
BasicLayout:
`/**
- Ant Design Pro v4 use
@ant-design/pro-layoutto handle Layout. - You can view component api by:
- https://github.com/ant-design/ant-design-pro-layout
*/
import ProLayout from '@ant-design/pro-layout';
import React, { useEffect } from 'react';
import { Link, useIntl, connect, history } from 'umi';
import { Result, Button } from 'antd';
import Authorized from '@/utils/Authorized';
import RightContent from '@/components/GlobalHeader/RightContent';
import { getAuthorityFromRouter } from '@/utils/utils';
import DefaultFooterDom from './Footer';
import logo from '../assets/logo.svg';
const noMatch = (
<Result
status={403}
title="403"
subTitle="Sorry, you are not authorized to access this page."
extra={
Go Login
}
/>
);
/**
- use Authorized check all menu item
*/
const menuDataRender = menuList => {
return menuList.map(item => {
const localItem = {
...item,
icon: iconEnum[item.icon],
key: item.path,
children: item.children ? menuDataRender(item.children) : '',
};
return Authorized.check(item.authority, localItem, null);
})
}
const BasicLayout = props => {
const {
dispatch,
children,
settings,
menuData,
location = {
pathname: '/',
},
} = props;
// 获取menu
useEffect(() => {
if (dispatch) {
dispatch({
type: 'menu/fetchMenuList',
});
}
}, []);
/**
- constructor
*/
useEffect(() => {
if (dispatch) {
dispatch({
type: 'user/fetchCurrent',
});
}
}, []);
/**
- init variables
*/
const handleMenuCollapse = payload => {
if (dispatch) {
dispatch({
type: 'global/changeLayoutCollapsed',
payload,
});
}
}; // get children authority
const authorized = getAuthorityFromRouter(props.route.routes, location.pathname || '/') || {
authority: undefined,
};
const { formatMessage } = useIntl();
return (
<ProLayout
logo={logo}
formatMessage={formatMessage}
onCollapse={handleMenuCollapse}
onMenuHeaderClick={() => history.push('/')}
menuItemRender={(menuItemProps, defaultDom) => {
if (menuItemProps.isUrl || !menuItemProps.path) {
return defaultDom;
}
return <Link to={menuItemProps.path}>{defaultDom}</Link>;
}}
// breadcrumbRender={(routers = []) => [
// {
// path: '/',
// breadcrumbName: formatMessage({
// id: 'menu.home',
// }),
// },
// ...routers,
// ]}
itemRender={() => ''}
footerRender={() => <DefaultFooterDom />}
menuDataRender={() => menuDataRender(menuData)}
rightContentRender={() => <RightContent />}
{...props}
{...settings}
>
<Authorized authority={authorized.authority} noMatch={noMatch}>
{children}
</Authorized>
</ProLayout>
);
};
export default connect(({ global, settings, menu }) => ({
collapsed: global.collapsed,
settings,
menuData: menu.menuData
}))(BasicLayout);
`
menu后台返回数据结构:
{ message: { code: 200, level: 'normal', message: 'sucsess', }, data: [ { path: '/first', name: '一级菜单A', icon: 'smile', }, { path: '/second', name: '一级菜单B', icon: 'smile', authority: ['user'], children: [ { path: '/second/sub', name: '二级菜单B-1', }, ], }, { path: '/forth', name: '一级菜单D', icon: 'smile', authority: ['user', 'admin'], children: [ { path: '/forth/forth-sub-1', name: '二级菜单D-1', children: [ { path: '/forth/forth-sub-1/forth-sub-sub56757', name: '三级菜单D-1-1', }, ], }, ], }, { path: '/admin', name: 'admin', icon: 'smile', authority: ['admin'], children: [ { path: '/admin/sub-page', name: 'sub-page', authority: ['admin'], }, ], }, { name: 'list.table-list', path: '/list', icon: 'smile', }, ] }); }
© 版本信息
- Ant Design Pro 版本: "4.1.0"
- umi 版本 "^3.2.0"
- 浏览器环境 谷歌
- 开发环境 [e.g. mac OS] win10