react hook 点击页面切换高亮对应菜单-react怎么高亮对应菜单（两种写法）附完整代码

前言：hook相当于没有生命周期概念，但是可以用useEffect来监听路由，当点击浏览器的前进后退时候去监听路由变化切换对应高亮菜单。

看下下面这个代码：

 useEffect( () => {

　　//这里等于  componentDidMonunt  和 componentDidUpdate 

　　return ()=>{

　　//这等于  componentWillUnMount

    }

})

我们知道使用widthRouter包裹后可以获取props.location.pathname，然后直接点击时候setState改变选中的就可以高亮对应的啦，但是当用户操作点击浏览器的后退前进时候就需要多加做一个监听当前的路由变化啦。

 

 

/***********hook写法高亮******************

import React, { useEffect, useState, Fragment } from 'react';
import { Layout, Breadcrumb, Menu, Dropdown, Button } from 'antd';

import styles from './index.less';

const { Header, Content, Footer } = Layout;
const { SubMenu } = Menu;

import { history, withRouter } from 'umi';


function header(props) {

  const [selectKey, setSelectKey] = useState('');
  const [list, setList] = useState([
    { name: '可视化展示', key: '7', path: '/' },
    { name: '贷款企业管理', key: '4', path: '/enterpriseManagement' },
    { name: '金融机构管理', key: '5', path: '/financialManagement' },
    { name: '产业协同分析', key: '6', path: '/aaa' },
    {
      name: '系统管理', key: '1', path: '/system',
      children: [
        { name: '用户管理', key: '1-01', path: '/userManagement' },
        { name: '角色管理', key: '1-12', path: '/roleManagement' },
        { name: '菜单管理', key: '1-13', path: '/menuManagement' },
      ],
    },
  ]);

//核心是再这里监听路由变化高亮对应的菜单
  useEffect(() => {
    history.listen((routeInfo) => {
      const pathname = routeInfo.pathname.split('/');
      const path = '/' + pathname[pathname.length - 1];
      setSelectKey(path);
    });
  }, []);

  const handleClick = (e) => {
    setSelectKey(e.key);
    history.push(e.key);
  };
  /**
   *渲染树形菜单
   * @param list
   * @returns {*}
   */
  const renderMenu = (list) => {
    return list.map(item => {
      if (item.children && item.children.length > 0) {
        return <SubMenu key={item.path} title={item.name}>{renderMenu(item.children)}</SubMenu>;
      } else {
        return <Menu.Item key={item.path}>{item.name}</Menu.Item>;
      }
    });
  };
  /**
   * 用户信息展示
   */
  const menu = (
    <Menu>
      <Menu.Item>
        <a href=''>
          退出登录
        </a>
      </Menu.Item>
    </Menu>
  );

  return <Fragment>
    <div className={styles.header}>
      <Header>
        <div className={styles.logo}/>
        <Menu onClick={handleClick} theme='dark' selectedKeys={[selectKey]} mode="horizontal">
          {renderMenu(list)}
          <Menu.Item>
            <Dropdown overlay={menu} placement="bottomCenter">
              <span>用户名字</span>
            </Dropdown>
          </Menu.Item>
        </Menu>
      </Header>
    </div>
  </Fragment>;
}

export default withRouter(header);

 

/***********class写法高亮******************

import React, { useEffect, useState, Fragment } from 'react';
import { Layout, Breadcrumb, Menu, Dropdown, Button } from 'antd';
import styles from './index.less';

const { Header, Content, Footer } = Layout;
const { SubMenu } = Menu;

import { history, withRouter } from 'umi';

const list = [
  { name: '可视化展示', key: '7', path: '/' },
  { name: '贷款企业管理', key: '4', path: '/enterpriseManagement' },
  { name: '金融机构管理', key: '5', path: '/financialManagement' },
  { name: '产业协同分析', key: '6', path: '/aaa' },
  {
    name: '系统管理', key: '1', path: '/system',
    children: [
      { name: '用户管理', key: '1-01', path: '/userManagement' },
      { name: '角色管理', key: '1-12', path: '/roleManagement' },
      { name: '菜单管理', key: '1-13', path: '/menuManagement' },
    ],
  },
];

class Index extends React.Component {


  constructor(props) {
    super(props);
    this.state = {
      selectKey: '',
    };
  }

  /**
   * 高亮对应的菜单
   */
  heightMenu = () => {
    const pathname = this.props.location.pathname.split('/');
    const path = '/' + pathname[pathname.length - 1];
    this.setState({ selectKey: path });
  };
 //核心组件加载完成获取pathname，然后去setState设置当前选中的key
  componentDidMount() {
    this.heightMenu();
  }
　　//当切换路由时候对比上一个props里面的location是不是等于当前的路由呀，然后对应操作就行啦
  componentDidUpdate(prevProps, prevState, snapshot) {
    if (prevProps.location !== this.props.location) {
      this.heightMenu();
    }
  }

  handleClick = (e) => {
    history.push(e.key);
  };

  /**
   * 树形菜单
   * @param list
   * @returns {*}
   */
  renderMenu = (list) => {
    return list.map(item => {
      if (item.children && item.children.length > 0) {
        return <SubMenu key={item.path} title={item.name}>{this.renderMenu(item.children)}</SubMenu>;
      } else {
        return <Menu.Item key={item.path}>{item.name}</Menu.Item>;
      }
    });
  };


  render() {
    return (
      <Fragment>
        <div className={styles.header}>
          <Header>
            <div className={styles.logo}/>
            <Menu onClick={this.handleClick} theme='dark' selectedKeys={[this.state.selectKey]} mode="horizontal">
              {this.renderMenu(list)}
              <Menu.Item>
                <Dropdown overlay={<Menu>
                  <Menu.Item>
                    <a href=''>
                      退出登录
                    </a>
                  </Menu.Item>
                </Menu>} placement="bottomCenter">
                  <span>用户名字</span>
                </Dropdown>
              </Menu.Item>
            </Menu>
          </Header>
        </div>
      </Fragment>
    );
  }
}

export default withRouter(Index);