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);