diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js index 7e2b0f293e75b44b19cd2f55762751a5ebbafdf5..3998735597a71dd6e3719b6a209969e6cc0f28cb 100644 --- a/src/layouts/BasicLayout.js +++ b/src/layouts/BasicLayout.js @@ -52,8 +52,6 @@ class BasicLayout extends React.PureComponent { constructor(props) { super(props); this.getPageTitle = memoizeOne(this.getPageTitle); - this.getBreadcrumbNameMap = memoizeOne(this.getBreadcrumbNameMap, isEqual); - this.breadcrumbNameMap = this.getBreadcrumbNameMap(); this.matchParamsPath = memoizeOne(this.matchParamsPath, isEqual); } @@ -77,7 +75,6 @@ class BasicLayout extends React.PureComponent { componentDidUpdate(preProps) { // After changing to phone mode, // if collapsed is true, you need to click twice to display - this.breadcrumbNameMap = this.getBreadcrumbNameMap(); const { collapsed, isMobile } = this.props; if (isMobile && !preProps.isMobile && !collapsed) { this.handleMenuCollapse(false); @@ -85,10 +82,10 @@ class BasicLayout extends React.PureComponent { } getContext() { - const { location } = this.props; + const { location, breadcrumbNameMap } = this.props; return { location, - breadcrumbNameMap: this.breadcrumbNameMap, + breadcrumbNameMap, }; } @@ -112,15 +109,13 @@ class BasicLayout extends React.PureComponent { return routerMap; } - matchParamsPath = pathname => { - const pathKey = Object.keys(this.breadcrumbNameMap).find(key => - pathToRegexp(key).test(pathname) - ); - return this.breadcrumbNameMap[pathKey]; + matchParamsPath = (pathname, breadcrumbNameMap) => { + const pathKey = Object.keys(breadcrumbNameMap).find(key => pathToRegexp(key).test(pathname)); + return breadcrumbNameMap[pathKey]; }; - getPageTitle = pathname => { - const currRouterData = this.matchParamsPath(pathname); + getPageTitle = (pathname, breadcrumbNameMap) => { + const currRouterData = this.matchParamsPath(pathname, breadcrumbNameMap); if (!currRouterData) { return 'Ant Design Pro'; @@ -129,6 +124,7 @@ class BasicLayout extends React.PureComponent { id: currRouterData.locale || currRouterData.name, defaultMessage: currRouterData.name, }); + return `${pageName} - Ant Design Pro`; }; @@ -175,9 +171,11 @@ class BasicLayout extends React.PureComponent { location: { pathname }, isMobile, menuData, + breadcrumbNameMap, } = this.props; + const isTop = PropsLayout === 'topmenu'; - const routerConfig = this.matchParamsPath(pathname); + const routerConfig = this.matchParamsPath(pathname, breadcrumbNameMap); const layout = ( {isTop && !isMobile ? null : ( @@ -217,7 +215,7 @@ class BasicLayout extends React.PureComponent { ); return ( - + {params => ( @@ -236,6 +234,7 @@ export default connect(({ global, setting, menu }) => ({ collapsed: global.collapsed, layout: setting.layout, menuData: menu.menuData, + breadcrumbNameMap: menu.breadcrumbNameMap, ...setting, }))(props => ( diff --git a/src/models/menu.js b/src/models/menu.js index 89a18dbb0d705ba2032e3f64854100f745087bab..39c9b317667e0c68701381cb5b0cf4ea71aa3071 100644 --- a/src/models/menu.js +++ b/src/models/menu.js @@ -70,20 +70,44 @@ const filterMenuData = menuData => { }) .filter(item => item); }; +/** + * 获取面包屑映射 + * @param {Object} menuData 菜单配置 + */ +const getBreadcrumbNameMap = menuData => { + const routerMap = {}; + + const flattenMenuData = data => { + data.forEach(menuItem => { + if (menuItem.children) { + flattenMenuData(menuItem.children); + } + // Reduce memory usage + routerMap[menuItem.path] = menuItem; + }); + }; + flattenMenuData(menuData); + return routerMap; +}; + +const memoizeOneGetBreadcrumbNameMap = memoizeOne(getBreadcrumbNameMap, isEqual); export default { namespace: 'menu', state: { menuData: [], + breadcrumbNameMap: {}, }, effects: { *getMenuData({ payload }, { put }) { const { routes, authority } = payload; + const menuData = filterMenuData(memoizeOneFormatter(routes, authority)); + const breadcrumbNameMap = memoizeOneGetBreadcrumbNameMap(menuData); yield put({ type: 'save', - payload: filterMenuData(memoizeOneFormatter(routes, authority)), + payload: { menuData, breadcrumbNameMap }, }); }, }, @@ -92,7 +116,7 @@ export default { save(state, action) { return { ...state, - menuData: action.payload, + ...action.payload, }; }, },