antd menu组件

继续记录antd+react使用

场景

1.每次刷新浏览器后，menu应该继续选中当前url对应的menuitem 2.限制只能打开一个menugroup

代码&思路

每次刷新浏览器后，menu应该继续选中当前url对应的menuitem

• 场景1思路：利用react路由的withRouter包裹当前组件，然后组件内部通过props就可以得到当前路由对象location；location的pathname就是当前的url，然后将该值赋给defaultSelectedKeys即可
• 场景2思路：menu组件打开的menu是通过openKeys控制，每次点击要打开的menu的时候，去将openkeys绑定的数组重置为当前点击的菜单的key即可

// Nav组件
import { withRouter } from "react-router-dom";
const Nav = ({ location }) => {
  const [keys, setKeys] = useState(["sub1"]);
  const saveKeys = ({ key }) => {
    setKeys(() => [key]);
  };
  return (
    <Menu
      onClick={handleClick}
      defaultSelectedKeys={[location.pathname]}
      openKeys={keys}
      mode="inline"
      style={{ width: "100 %", height: "100%" }}
    >
      <SubMenu
        onTitleClick={saveKeys}
        key="sub0"
        title={
          <span>
            <CopyOutlined />
            <span>概览</span>
          </span>
        }
      >
        <Menu.Item key="/">
          <Link to="/">首页</Link>
        </Menu.Item>
      </SubMenu>
      <SubMenu
        onTitleClick={saveKeys}
        key="sub0"
        title={
          <span>
            <CopyOutlined />
            <span>概览</span>
          </span>
        }
      >
        <Menu.Item key="/about">
          <Link to="/about">关于</Link>
        </Menu.Item>
      </SubMenu>
    </Menu>
  );
};
export default withRouter(Nav);