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>

其中,keyselectKeys是关键。

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

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值