我正在尝试实现onclick到导航栏项目,所以当我点击导航栏中的一个项目,它会加载一些组件。
下面是导航栏的列表:
class Navbar extends React.Component {
render () {
const menuItems = [
{
title: 'Home',
url: '/',
},
{
title: 'Assets',
url: '/Assets',
},
{
title: 'Service Report',
url: '/Servicereport',
},
{
title: 'Change Request',
url: '/Changerequest',
},
{
title: 'Logout',
url: '/logout',
}
];
return (
<nav>
<ul className="menus">
{menuItems.map((menu, index) => {
return (
<MenuItems
items={menu}
key={index}
/>
);
})}
</ul>
</nav>
);
};
}
export default Navbar;
我怎样才能实现?如果需要更多的信息,请让我知道.谢谢.
我正在尝试在导航栏项目中实现onclick
3条答案
按热度按时间nbysray51#
你可以在React中尝试onClick事件,并使用React路由器的useNavigate钩子调用一个函数来重定向到指定的位置,你首先需要安装react路由器DOM。
尝试以下代码进行重定向
r9f1avp52#
您只需向MenuItem添加一个onclick属性。
hfsqlsce3#
〈MenuItems onClick={()=〉{...}} {... this.props} /〉将onClick处理程序附加为属性。是否定义了MenuItems?我将名称更改为MenuItem。