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.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。