diff --git a/src/components/SiderMenu/BaseMenu.js b/src/components/SiderMenu/BaseMenu.js index 9948571131ade6647979e7d16a123ef0836fe8a4..a05f4296a2402665b32303b47c0fc3c3b2b27d7e 100644 --- a/src/components/SiderMenu/BaseMenu.js +++ b/src/components/SiderMenu/BaseMenu.js @@ -23,7 +23,7 @@ const getIcon = icon => { }; export const getMenuMatches = (flatMenuKeys, path) => - flatMenuKeys.filter(item => pathToRegexp(item).test(path)); + flatMenuKeys.filter(item => item && pathToRegexp(item).test(path)); export default class BaseMenu extends PureComponent { constructor(props) { diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js index 18b6d0d35e97fe210fdaff837dda8ee7f642fe24..fa809c8af4dcf41d989ea3de04d1f54a4bfe6b3e 100644 --- a/src/layouts/BasicLayout.js +++ b/src/layouts/BasicLayout.js @@ -16,8 +16,6 @@ import logo from '../assets/logo.svg'; import Footer from './Footer'; import Header from './Header'; import Context from './MenuContext'; -// TODO: should use this.props.routes -import routerConfig from '../../config/router.config'; const { Content } = Layout; const { check } = Authorized; @@ -48,28 +46,6 @@ function formatter(data, parentPath = '', parentAuthority, parentName) { }); } -// get menu map data -const menuData = formatter(routerConfig[1].routes); - -/** - * 获取面包屑映射 - * @param {Object} menuData 菜单配置 - */ -const getBreadcrumbNameMap = memoizeOne(menu => { - const routerMap = {}; - const mergeMenuAndRouter = data => { - data.forEach(menuItem => { - if (menuItem.children) { - mergeMenuAndRouter(menuItem.children); - } - // Reduce memory usage - routerMap[menuItem.path] = menuItem; - }); - }; - mergeMenuAndRouter(menu); - return routerMap; -}, isEqual); - const query = { 'screen-xs': { maxWidth: 575, @@ -99,8 +75,8 @@ class BasicLayout extends React.PureComponent { constructor(props) { super(props); this.getPageTitle = memoizeOne(this.getPageTitle); - // Because there are many places to be. So put it here - this.breadcrumbNameMap = getBreadcrumbNameMap(menuData); + this.getBreadcrumbNameMap = memoizeOne(this.getBreadcrumbNameMap, isEqual); + this.breadcrumbNameMap = this.getBreadcrumbNameMap(); } state = { @@ -132,7 +108,7 @@ class BasicLayout extends React.PureComponent { } componentDidUpdate() { - this.breadcrumbNameMap = getBreadcrumbNameMap(menuData); + this.breadcrumbNameMap = this.getBreadcrumbNameMap(); } componentWillUnmount() { @@ -148,6 +124,32 @@ class BasicLayout extends React.PureComponent { }; } + getMenuData() { + const { + route: { routes }, + } = this.props; + return formatter(routes); + } + + /** + * 获取面包屑映射 + * @param {Object} menuData 菜单配置 + */ + getBreadcrumbNameMap() { + const routerMap = {}; + const mergeMenuAndRouter = data => { + data.forEach(menuItem => { + if (menuItem.children) { + mergeMenuAndRouter(menuItem.children); + } + // Reduce memory usage + routerMap[menuItem.path] = menuItem; + }); + }; + mergeMenuAndRouter(this.getMenuData()); + return routerMap; + } + getPageTitle = pathname => { let currRouterData = null; // match params path @@ -230,7 +232,7 @@ class BasicLayout extends React.PureComponent { Authorized={Authorized} theme={silderTheme} onCollapse={this.handleMenuCollapse} - menuData={menuData} + menuData={this.getMenuData()} {...this.props} /> )}