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 组件如何实现页面跳转 - React Router DOM 示例

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

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