React-router、antd实现同步浏览器地址高亮对应菜单

关于 React 和 antd 组件库

React 是目前主流的前端开发框架，目前前端流行的框架是 Angular,Vue,React，具体选型看项目需求而定。

antd 是基于 React 开发的组件库，有蚂蚁金服团队退出，目前使用人数较多，组件也比较多，文档也很友好。

本次我做的就是使用 antd 的 Menu 组件搭配 React，实现浏览器地址改变，高亮对应导航菜单的需求。

具体实现

1.本次使用React-router-dom@4.3.1作为前端路由，为了方便，直接使用 HashRouter:

// Layout/index.js

//引入必要的组件

import React, { PureComponent } from 'react';
import { NavLink, Route, Switch, Redirect, Link } from 'react-router-dom';
import { Menu, Icon } from 'antd';

import 'assets/layout/index.scss';

const MenuItem = Menu.Item;
const SubMenu = Menu.SubMenu;

2.路由配置

//前端需要维护一份路由表，无论是静态配置亦或是由后端获取, antd的Menu组件使用key作为菜单项的唯一标识，这里我们直接使用path作为key（如果是子菜单则使用title作为key），，当浏览器hash改变后可以更方便的获取到菜单项（注意，key一定不要重复，否则达不到效果）

//这里的菜单配置里子菜单可以任意级
const menuConfig = [
  {
    title: '首页',
    icon: 'pie-chart',
    path: '/home'
  },
  {
    title: '购买',
    icon: null,
    children: [
      {
        title: '详情',
        icon: null,
        path: '/buy/detail'
      }
    ]
  },
  {
    title: '管理',
    icon: null,
    children: [
      {
        title: '业绩',
        icon: null,
        children: [
          {
            title: '价格',
            icon: null,
            path: '/management/detail/price',
            children: [
              {
                title: '股价',
                icon: null,
                path: '/management/ddd'
              }
            ]
          }
        ]
      }
    ]
  }
];

3. 组件编写

   1. 实现思路：

   (1).为了实现不限级别的路由渲染及高亮菜单，我这里使用的是递归实现。

   (2).当浏览器地址改变后要高亮对应菜单项，这个可能是一级菜单，也可能是子级菜单，所以还需要展开相应的子菜单

   (3).监听浏览器地址变化，使用 react-router 渲染的组件在 props 中会接收 history 的对象，这个对象有一个 listen 方法，可以添加自定义监听事件，默认接收参数为一个对象：{ hash: "" pathname: "" search: "" state: undefined }

   2. 开始实现

   // 1.先定义一个菜单节点类，在下面初始化路由表数据的时候会用到：
   class MenuNode {
     constructor(menuItem, parent = null) {
       this.key = menuItem.path || menuItem.title;
       this.parent = parent;
     }
   }
   // 2. react组件
   // defaultOpenKeys和defaultSelectedKeys是传递给Menu组件，用于指定当前打开的菜单项
   export default class Index extends PureComponent {
     constructor(props) {
       super(props);
       this.state = {
         defaultOpenKeys: [],
         defaultSelectedKeys: []
       };
       this.menuTree = [];
     }
   
     componentDidMount = () => {
       const history = this.props.history;
       //初始化路由表：
       this.initMenu(menuConfig);
       //在渲染完成后需要手动执行一次此方法设置当前菜单，因为此时不会触发history的listen函数
       this.setActiveMenu(history.location);
       this.unListen = history.listen(this.setActiveMenu);
     };
   
     componentWillUnmount = () => {
       //移除监听
       this.unListen();
     };
   
    //序列化路由表
     initMenu = (config, parent = null) => {
       for (let menuItem of config) {
         if (menuItem.children) {
            //如果menuItem有children则对其children递归执行此方法，并且将当前menuItem作为父级
           this.initMenu(menuItem.children, new MenuNode(menuItem, parent));
         } else {
            //如果这个路由不是没有children，则是一级路由，则直接放入menuTree中
           this.menuTree.push(new MenuNode(menuItem, parent));
         }
       }
       //menuTree中最终存储的是单个menuNode对象，通过判断menuNode是否有效的parent即可判断是一级路由还是子菜单下的路由
     };
   
     //这个方法是实现菜单高亮的核心方法
     setActiveMenu = location => {
        //拿到当前浏览器的hash路径
       const pathname = location.pathname;
       //
       for (let node of this.menuTree) {
           //使用正则判断当前浏览器path是否与菜单项中的key相匹配，此正则可以匹配动态路径（类似于/product/:id这种传参的路由），所以即便是动态路由也能高亮对应菜单
            const isActivePath = new RegExp(`^${node.key}`).test(pathname);
            if (isActivePath) {
               const openKeys = [];
               const selectedKeys = [node.key];
               //判断当前菜单是否有父级菜单，如果有父级菜单需要将其展开
               while (node.parent) {
                 openKeys.push(node.parent.key);
                 node = node.parent;
               }
               this.setState({
                 defaultOpenKeys: openKeys,
                 defaultSelectedKeys: selectedKeys
               });
               return;
            }
       }
       //如果一个路由都没有匹配上则关闭菜单
       this.setState({
         defaultSelectedKeys: [],
         defaultOpenKeys: []
       });
     };
   
    //用于渲染路由，通过递归实现任意层级渲染
     renderMenuItem = menuArr => {
       const ret = menuArr.map(item => {
         if (item.children) {
           return (
             <SubMenu title={item.title} key={item.path || item.title}>
               {this.renderMenuItem(item.children)}
             </SubMenu>
           );
         } else {
           return (
             <MenuItem title={item.title} key={item.path}>
               <Link to="item.path">{item.title}</Link>
             </MenuItem>
           );
         }
       });
       return ret;
     };
   
     render() {
       return (
         <div>
           <div>
             <div style={{ width: 150 }}>
               <div>当前菜单：{this.state.defaultSelectedKeys[0]}</div>
               <Menu
                 mode="inline"
                 theme="dark"
                 selectedKeys={this.state.defaultSelectedKeys}
                 openKeys={this.state.defaultOpenKeys}
                 onSelect={this.selectMenuItem}
                 onOpenChange={this.openMenu}
               >
                 {this.renderMenuItem(menuConfig)}
               </Menu>
             </div>
           </div>
           <div id="main">
                heelo,react
           </div>
         </div>
       );
     }
   }
   

4. 效果图