menu导航栏

const items = [

  getItem('detail', '/', <MailOutlined />),

  getItem('首页', '', <SettingOutlined />, [getItem('表单', '/home')]),

];

export default function BasicLayout(props) {

  const { history } = props;

  const { pathname } = props.location;

  const [taburl, setTaburl] = useState('/');

  // 必写  保存刷新高亮不变

  useEffect(() => {

    setTaburl(pathname);

  }, [pathname]);

  // 选中切换页面

  const onSelect = (opt) => {

    console.log(opt);

    history.push(opt.key);

    setTaburl(opt.selectedKeys);

  };

  return (

    <div className="big">

      <div className="left">

        <Menu

          mode="inline"

          theme="drak"

          //初始选中的菜单项 key 数组

          defaultSelectedKeys={taburl}

        //初始展开的 Menu 菜单项 key 数组 

          defaultOpenKeys={['/']}

          //当前打开的页面

          selectedKeys={taburl}

        //选中页面的事件

          onSelect={onSelect}

          items={items}

        />

      </div>

        //展示选中的页面

      <div className="right">{props.children}</div>

    </div>

  );

}