How can I highlight the active selection on a react navigation bar? - reactjs

Question

New to react and trying to figure out how to highlight the active selection on the navbar. In addition to this, I would also like to highlight the "Home" bar as this is the default route once you load the page. I've seen some other people use NavLink instead of Link as well: is this something I should consider? Thanks in advance.
This is App.js
function App() {
return (
<>
<div id="root">
<Router>
<Navbar />
<Routes>
<Route path='/' element={<Home/>} />
<Route path='/projects' element={<Projects/>}/>
<Route path='/about-me' element={<AboutMe/>}/>
<Route path='/contact' element={<Contact/>}/>
</Routes>
</Router>
</div>
</>
);
}
export default App;
This is my navigation bar component:
const Navbar= () =>{
return (
<div>
<ul>
<li>
<a>
<Link className="navbar-click" to="/">Home</Link>
</a>
</li>
<li>
<a>
<Link className="navbar-click" to="/projects">Projects</Link>
</a>
</li>
<li>
<a>
<Link className="navbar-click" to="/about-me">About Me</Link>
</a>
</li>
<li>
<a>
<Link className="navbar-click" to="/contact">Contact</Link>
</a>
</li>
</ul>
</div>
);
}
export default Navbar;
And this is my CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 220px;
background-color: #2B2D42;
height: 100vh;
position: fixed;
overflow: auto;
}
.navbar-click {
margin: 0;
padding: 25px 0px;
}
li {
text-align: center;
}
li a {
display: block;
color: #fff;
text-decoration: none;
font-size: 20px;
}
li a:hover {
background-color: #202130;
color: white;
}
Link.active {
color: #202130;
}

Answer 1

You can use the hook from react-router-dom, useLocation.
const location = useLocation();
Then you can see what route you are on, even in the navigation bar, and there you can work with that.