MenuItem组件本身并不支持页面跳转,需要在点击事件中使用路由或者导航组件来实现页面跳转。

举个例子,在React中使用react-router-dom库实现页面跳转,可以在点击事件中使用Link组件或者使用history对象的push方法实现页面跳转。

使用Link组件:

import { Link } from 'react-router-dom';

function MyMenu() {
  return (
    <Menu>
      <Menu.Item key="home">
        <Link to="/">首页</Link>
      </Menu.Item>
      <Menu.Item key="about">
        <Link to="/about">关于我们</Link>
      </Menu.Item>
    </Menu>
  );
}

使用history对象:

import { useHistory } from 'react-router-dom';

function MyMenu() {
  const history = useHistory();

  function handleClick() {
    history.push('/contact');
  }

  return (
    <Menu>
      <Menu.Item key="home" onClick={() => history.push('/')}>
        首页
      </Menu.Item>
      <Menu.Item key="contact" onClick={handleClick}>
        联系我们
      </Menu.Item>
    </Menu>
  );
}

以上代码仅供参考,具体实现还需要根据项目的具体情况来调整。

MenuItem Props怎么跳转页面

原文地址: http://www.cveoy.top/t/topic/b9Ss 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录