How to change style of selected React-router link?

Question

JavaScript

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="NavBar_item">
          <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;

I know that you can add a class to the selected link to change its styles using jQuery , but I understand that this is React) Tell me what React chips can I use to change the selected link?

Answer 1

Navlink
Import from react router home
And for checking there is className={({isActive}) => isActive ? "classforactivelink": "anotherclass"} like