Update active item in menu with React and Semantic-Ui - reactjs

Question

How can i change an item in the menu to be set to active item?
Currently the first item "Home" is always set to be active item. The goal is that if I click on of the other items, then that item will be set to active and the other item will no longer be active.
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

You can just make use of NavLink instead of Link. you can give it an activeClassName prop and whenever the route matches to prop that className will be added to that link.
read the documentation here:
https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md

Answer 2

React router feeatures a <NavLink> property which features an activeClassName property. So to make things work, change your <Links> like this:
<div className="item">
<NavLink to="/" activeClassName="active">
<h2>
Home
</h2>
</NavLink>
</div>
Disclaimer: This will set the "active" class to your element and not your div like in your example above. Make sure to adjust the css code as well!