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