react+antd函数式组件和类式组件实现浏览器回退导航菜单跟随高亮

目录

1.函数式组件

2.类式组件

---

1.函数式组件

刚使用react写项目，这里用到的是函数式组件，使用useState,useEffect,需先引用

import React, { useState, useEffect } from 'react'

钩子函数内执行用

定义状态current（当前菜单）
let [current,setCurrent] = useState('/admin/power')
// 当生命周期用
	useEffect(() => {
		//监听浏览器地址变化
		props.history.listen((event)=>{
        //pathname为地址名
			let test = event.pathname
			setCurrent(test)
		})
	},[])

antd组件内selectKeys={[current]}

<Menu
							 mode="horizontal"
							 defaultSelectedKeys={['/admin/power']}
							 items={items}
							 onClick={changePage}
							 selectedKeys={[current]}
						/>

即可实现。

2.类式组件

react中有这么一个钩子函数，componentWillReceiveProps，它有以下特点：

1.组件初次渲染时不会执行componentWillReceiveProps;

2.当props发生变化时执行componentWillReceiveProps；

3.在这个函数里，旧的属性仍可以通过this.props来获取。

所以我们选择它来监听路由变化。以下是使用方法：

同样的：state中定义当前路径，初始值为零，此时可以代替 defaultSelectedKeys={['0']}

  this.state = {
        currentRoute:'0'
  }

使用钩子函数

componentWillReceiveProps(routeInfo){
	    let pathname = routeInfo.location.pathname//此参数获取当前路径名
		let route = (path)=>{
			let current
			switch(path){
				case '/a': current='0';break;
				case '/b': current='1';break;
				case '/c': current='2';break;
				case '/d': current='3';break;
				case '/e': current='4';break;
			}
			return current
		}
	    this.state.currentRoute = route(pathname)
	}

导航菜单

<Menu theme="dark" mode="horizontal"  selectedKeys={[this.state.currentRoute]} style={{width:'550px'}}>
						<Menu.Item key="0">
							<Link to="/a">吃饭管理</Link>
						</Menu.Item>
						<Menu.Item key="1">
							<Link to="/b">睡觉管理</Link>
						</Menu.Item>
						<Menu.Item key="2">
							<Link to="/c">看书管理</Link>
						</Menu.Item>
						<Menu.Item key="3">
							<Link to="/d">代码管理</Link>
						</Menu.Item>
						<Menu.Item key="4">
							<Link to="/e">时间管理</Link>
						</Menu.Item>
					</Menu>

其中，key和selectKeys是关键。

至于为什么不用 <Menu items={[...]} /> 的简写方式，我也想，但是它不显示，所以只能老老实实多写点冗余代码了，有解决方法的欢迎评论区指点。