react+antd4 menu刷新之后保持之前默认选中

1.开发环境 react+antd2.电脑系统 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.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。