关于react.js:reactantd4-menu刷新之后保持之前默认选中

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