SemanticUI menu - first item always active - reactjs

Question

I am rebuilding my portfolio in React, and while setting up the menu that I am using from semantic UI, I observe that the first menu item is always active.
I am fairly new to React, and this is my first project on the same.
So, here's my Index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.querySelector("#root"));
Here's my App.js
import "./main.css";
import React from "react";
import { Route, NavLink, BrowserRouter as HashRouter } from "react-router-dom";
import home from "./home";
import about from "./about";
import portfolio from "./portfolio";
import resume from "./resume";
import contactMe from "./contactMe";
class mainContent extends React.Component {
render() {
return (
<HashRouter>
<div className="main-content">
<div className="ui five item menu">
<NavLink to="/" className="item">
Home
</NavLink>
<NavLink to="/about" className="item">
About
</NavLink>
<NavLink to="/portfolio" className="item">
Portfolio
</NavLink>
<NavLink to="/resume" className="item">
Resume
</NavLink>
<NavLink to="/contactMe" className="item">
Contact Me
</NavLink>
</div>
<div className="content">
<Route exact path="/" component={home} />
<Route path="/about" component={about} />
<Route path="/portfolio" component={portfolio} />
<Route path="/resume" component={resume} />
<Route path="/contactMe" component={contactMe} />
</div>
<div className="footer">
<footer className="fixed">
© Credits
</footer>
</div>
</div>
</HashRouter>
);
}
}
export default mainContent;
everything looks fine, except that first item does not seem to loose the active status when navigated to different component.
Here's an image that you can refer to -
How can I solve this issue? so that only the current link is shown as active.
Appreciate your help and feedback.
Thanks.

Answer 1

You can use the exact prop on the NavLink components too. The root route / is always going to match because it is the root route.
This is what you need to add
<NavLink to="/" className="item" exact>Home</NavLink>