1.开发环境 react+antd
2.电脑系统 windows11专业版
3.咱们在我的项目的开发过程中,会遇到刷新页面之前选中的menu会失落,怎么刷新之后还放弃之前的选中的菜单呢?上面我来分享一下。
4.须要用到withRouter来解决,一般组件的props是没有location,match,和history这三个属性的,只有路由组件才有。所以withRouter的作用就是将一般组件包装成路由组件,这样就会给一般组件的props加上location,match,和history这三个属性:
import React, { useEffect, useState } from "react";import { Menu, Layout } from 'antd';import { withRouter } from "react-router-dom";const { Sider } = Layout;function SideMenu(props) { const [selectdValue,setSelectdValue] = useState(['result']); function _handleMenuClick({ item, key, keyPath}) { // console.log(item); // console.log(key); // console.log(keyPath); setSelectdValue(keyPath); props.history.push('/${key}`); } // 选中 菜单存储 //要害代码 const getMenuOptions=()=>{ const {pathname} = props.location; const menuKey = pathname.split('/')[1] || 'result'; setSelectdValue([menuKey]); } useEffect(()=>{ getMenuOptions(); },[]) return <Sider width={190} className="site-layout-background"> <Menu onClick={_handleMenuClick} selectedKeys={selectdValue} mode="inline" style={{ height: '100%', borderRight: 0 }} theme="dark" > <Menu.Item key="chenSouthList">南治理</Menu.Item> <Menu.Item key="chenNorthList">北治理</Menu.Item> </Menu> </Sider>}export default withRouter(SideMenu);
5.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。