pro 菜單高亮

通常在項目中無法保持路由層級的嵌套關(guān)系， props.children 的渲染很多情況下并不方便，這時候為了保持左側(cè)菜單欄的高亮狀態(tài)，有兩種方式可以實現(xiàn)。

文章轉(zhuǎn)自我的語雀：https://www.yuque.com/liuyin-zzwa0/ada6ao/dvpky4

無侵入式

path 的寫法注意按照 url 的層級就可以實現(xiàn)。

{
    path: '/base',
    name: 'base',
    icon: 'bars',
    routes: [
          {
            path: '/base/',
            name: 'index',
            component: './Base/Index'
          },
          {
            path: '/base/edit/',
            name: 'detail',
            component: './Base/Edit',
            hideInMenu: true,
          },
    ],
},

侵入式

修改SiderMenu組件

1. 修改 models/base.js 文件，添加如下代碼

reducers: { 
    // ... 省略
  setAscriptionPathname(state, action){
    return {
      ...state,
      ascriptionPathname: action.payload
    }
  }
}

2. 修改 src\layouts\BasicLayout.js

export default connect(({ base, setting, menu }) => ({
  Company: base.company,
  collapsed: base.collapsed,
  layout: setting.layout,
  routerMap: menu.routerMap,
  menuData: menu.menuData,
  breadcrumbNameMap: menu.breadcrumbNameMap,
  ...setting,
  ascriptionPathname: base.ascriptionPathname,
}))(props => (
  <Media query="(max-width: 599px)">
    {isMobile => <BasicLayout {...props} isMobile={isMobile} />}
  </Media>
));

3. 修改 SilderMenu/BaseMenu.js 文件，添加如下代碼

import { getMenuMatches, getAscriptionPathname } from './SiderMenuUtils';
// ... 省略中間代碼
let selectedKeys = this.getSelectedMenuKeys(pathname);
if(openKeys && !!this.props.ascriptionPathname){ // 菜單展開并存在自定義歸屬路徑
  const selfSelectedKeys = this.getSelectedMenuKeys(ascriptionPathname);
  const notEmpty = [selectedKeys.filter(a => !!a), selfSelectedKeys.filter(a => !!a)];
  // 保證一級菜單相同，但是應(yīng)該有更合適的判斷方式，根據(jù)實際情況來改
  if(openKeys[0] === selfSelectedKeys[0] && notEmpty[0].length < notEmpty[1].length){
    selectedKeys = selfSelectedKeys;
  }
}
if (!selectedKeys.length && openKeys) {
  selectedKeys = [openKeys[openKeys.length - 1]];
}

3. 在頁面組件中調(diào)用 setAscriptionPathname 方法

componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'base/setAscriptionPathname',
      payload: 'lexicon/index', // 這里放router.js|| router.config.js 里的菜單項中的 path 
    })
  }