优化侧边栏导航刷新后依旧能展开选中当前地址的菜单项

src/components/layout/header.js

@@ -5,14 +5,16 @@ import Menus from './menu'
 
 const SubMenu = Menu.SubMenu
 
-function Header ({user, logout, switchSider, siderFold, isNavbar, menuPopoverVisible, location, switchMenuPopover}) {
+function Header ({user, logout, switchSider, siderFold, isNavbar, menuPopoverVisible, location, switchMenuPopover, navOpenKeys, changeOpenKeys}) {
   let handleClickMenu = e => e.key === 'logout' && logout()
   const menusProps = {
     siderFold: false,
     darkTheme: false,
     isNavbar,
     handleClickNavMenu: switchMenuPopover,
-    location
+    location,
+    navOpenKeys,
+    changeOpenKeys
   }
   return (
     <div className={styles.header}>

src/components/layout/menu.js

@@ -26,14 +26,42 @@ const getMenus = function (menuArray, siderFold, parentPath) {
   })
 }
 
-function Menus ({ siderFold, darkTheme, location, isNavbar, handleClickNavMenu }) {
+function Menus ({ siderFold, darkTheme, location, isNavbar, handleClickNavMenu, navOpenKeys, changeOpenKeys }) {
   const menuItems = getMenus(menu, siderFold)
+
+  const onOpenChange = (openKeys) => {
+    const latestOpenKey = openKeys.find(key => !(navOpenKeys.indexOf(key) > -1))
+    const latestCloseKey = navOpenKeys.find(key => !(openKeys.indexOf(key) > -1))
+    let nextOpenKeys = [];
+    if (latestOpenKey) {
+      nextOpenKeys = getAncestorKeys(latestOpenKey).concat(latestOpenKey)
+    }
+    if (latestCloseKey) {
+      nextOpenKeys = getAncestorKeys(latestCloseKey)
+    }
+    changeOpenKeys(nextOpenKeys)
+  }
+  const getAncestorKeys = (key) => {
+    const map = {
+      // navChildParent: ['navParent'],
+      navigation2: ['navigation']
+    }
+    return map[key] || []
+  }
+  let menuProps = {}
+  if(!siderFold) {//菜单栏收起时，不能操作openKeys
+    menuProps = {
+      onOpenChange: onOpenChange,
+      openKeys: navOpenKeys
+    }
+  }
+
   return (
     <Menu
+      {...menuProps}
       mode={siderFold ? 'vertical' : 'inline'}
       theme={darkTheme ? 'dark' : 'light'}
       onClick={handleClickNavMenu}
-      defaultOpenKeys={isNavbar ? menuItems.map(item => item.key) : []}
       defaultSelectedKeys={[location.pathname.split('/')[location.pathname.split('/').length - 1] || 'dashboard']}>
       {menuItems}
     </Menu>

src/components/layout/sider.js

@@ -4,11 +4,13 @@ import styles from './main.less'
 import { config } from '../../utils'
 import Menus from './menu'
 
-function Sider ({ siderFold, darkTheme, location, changeTheme }) {
+function Sider ({ siderFold, darkTheme, location, changeTheme, navOpenKeys, changeOpenKeys }) {
   const menusProps = {
     siderFold,
     darkTheme,
-    location
+    location,
+    navOpenKeys,
+    changeOpenKeys
   }
   return (
     <div>

src/models/app.js

@@ -13,7 +13,8 @@ export default {
     menuPopoverVisible: false,
     siderFold: localStorage.getItem('antdAdminSiderFold') === 'true',
     darkTheme: localStorage.getItem('antdAdminDarkTheme') !== 'false',
-    isNavbar: document.body.clientWidth < 769
+    isNavbar: document.body.clientWidth < 769,
+    navOpenKeys: JSON.parse(localStorage.getItem('navOpenKeys') || '[]') //侧边栏菜单打开的keys
   },
   subscriptions: {
     setup ({dispatch}) {
@@ -173,6 +174,12 @@ export default {
         ...state,
         menuPopoverVisible: !state.menuPopoverVisible
       }
+    },
+    handleNavOpenKeys(state, action) {
+      return {
+        ...state,
+        ...action.payload
+      }
     }
   }
 }

src/routes/app.js

@@ -11,7 +11,7 @@ import { classnames } from '../utils'
 import '../components/layout/common.less'
 
 function App ({children, location, dispatch, app}) {
-  const {login, loading, loginButtonLoading, user, siderFold, darkTheme, isNavbar, menuPopoverVisible} = app
+  const {login, loading, loginButtonLoading, user, siderFold, darkTheme, isNavbar, menuPopoverVisible, navOpenKeys} = app
   const loginProps = {
     loading,
     loginButtonLoading,
@@ -26,6 +26,7 @@ function App ({children, location, dispatch, app}) {
     location,
     isNavbar,
     menuPopoverVisible,
+    navOpenKeys,
     switchMenuPopover () {
       dispatch({type: 'app/switchMenuPopver'})
     },
@@ -34,6 +35,10 @@ function App ({children, location, dispatch, app}) {
     },
     switchSider () {
       dispatch({type: 'app/switchSider'})
+    },
+    changeOpenKeys(openKeys) {
+      localStorage.setItem('navOpenKeys', JSON.stringify(openKeys))
+      dispatch({ type: 'app/handleNavOpenKeys', payload: { navOpenKeys: openKeys } })
     }
   }
 
@@ -41,8 +46,13 @@ function App ({children, location, dispatch, app}) {
     siderFold,
     darkTheme,
     location,
+    navOpenKeys,
     changeTheme () {
       dispatch({type: 'app/changeTheme'})
+    },
+    changeOpenKeys(openKeys) {
+      localStorage.setItem('navOpenKeys', JSON.stringify(openKeys))
+      dispatch({ type: 'app/handleNavOpenKeys', payload: { navOpenKeys: openKeys } })
     }
   }