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