How to change style of selected React-router link? - reactjs

Question

I have NavBar.jsx:
import React from "react";
import { Link } from "react-router-dom";
import "./navBar.sass";
function NavBar() {
return (
<div className="NavBar_container">
<nav className="NavBar">
<Link
to="/CreateReview"
className={(isActive) =>
"selected" + (!isActive ? " unselected" : "")
}
>
<div className="NavBar_img">
<img src="./create_review_icon.png" alt="create_review" />
</div>
<p className="NavBar_title">Create Review</p>
</Link>
<Link to="/Hotels" className="NavBar_item">
<div className="NavBar_img">
<img src="./main_page_icon.png" alt="main_page" />
</div>
<p className="NavBar_title">Reviews</p>
</Link>
<Link to="/MyAccount" className="NavBar_item">
<div className="NavBar_img">
<img src="./my_account_icon.png" alt="my_account" />
</div>
<p className="NavBar_title">My account</p>
</Link>
</nav>
;
</div>
);
}
export default NavBar;
And some styles:
.NavBar
position: fixed
z-index: 9999
display: flex
justify-content: space-between
width: 400px
height: 75px
padding: 15px 25px 0 25px
background-color: rgba(0, 0, 0, 0.81)
border-bottom-left-radius: 30px
border-bottom-right-radius: 30px
&_container
width: 450px
margin: 0 auto
&_item
text-decoration: none
&:hover , &:active
.NavBar_title
transition: 0.2s all
color: #DAAD86
border-bottom: 1px solid #DAAD86
.NavBar_img
transition: 0.2s all
transform: scale(1.1)
&_img
width: 35px
margin: 0 auto
&_title
text-align: center
color: white
padding-bottom: 5px
.selected
background-color: blue
.unselected
background-color: red
I'm trying to set up my NavBar so that the selected link changes style, nothing works right now, what's wrong? I would like the text under the image to change its color and become underlined (as it is done in the :hover classes). I did this according to the React-Router documentation, maybe I missed something?

Answer 1

In your app.jsx file, or wherever you have your navbar component rendering, use the useLocation hook provided by 'react-router-dom' to get the current page. You can then pass it to your navbar as props and give the links the 'selected' class if the current page === the page the link points to.