MenuItem 组件如何实现页面跳转 - React Router DOM 示例
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>
);
}
以上代码仅供参考,具体实现还需要根据项目的具体情况来调整。
原文地址: https://www.cveoy.top/t/topic/jGYU 著作权归作者所有。请勿转载和采集!