使用React和Semantic Ui更新菜单中的活动项

Question

如何将菜单中的项目更改为活动项目？目前，第一项"；主页"；始终设置为活动项。目标是，如果我点击其他项目，那么该项目将被设置为活动项目，而其他项目将不再是活动项目。

return (
<div className="ui menu">
<Link to="/">
<img 
style={{
padding: 20
}}
className="ui image" 
src={Rmarketingv1}
alt="alt"
/>
</Link>
<div 
style={{
margin: 40
}}
className="ui borderless horizontal right secondary menu"
>
<div className="active item">
<Link to="/">
<h2>
Home
</h2>
</Link>
</div>
<div className="item">
<Link to="/Service">
<h2>
Tjenester
</h2>
</Link>
</div>
<div className="item">
<Link to="/work">
<h2>
Jobbmuligheter
</h2>
</Link>
</div>
<div className="item">
<Link to="/contact">
<h2>
Kontakt
</h2>
</Link>
</div>
</div>
</div>
);

Answer 1

您可以使用NavLink而不是Link。你可以给它一个activeClassName道具，只要路由与to道具匹配，className就会被添加到该链接中。

阅读此处的文档：
https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md

Answer 2

React路由器具有<NavLink>属性，该属性具有activeClassName属性。因此，为了让事情正常运行，可以这样更改<Links>：

<div className="item">
<NavLink to="/" activeClassName="active">
<h2>
Home
</h2>
</NavLink>
</div>

免责声明：这将设置；活动的"；类到您的元素，而不是像上面例子中那样的div。确保也调整css代码！