Custom Active Link in react-router v4

Question

I want to add active class which router is active in react. I start learning react so i need some help in this. I need to add the class in the li element not on the Link element.

<ul className="list-unstyled">
    <li className={RouteHelper("/")}> <Link to="/"> <FaHome /> Home </Link> </li>
    <li className={RouteHelper("/tables")}><Link to="tables"> <FaTable />Tables </Link></li>
</ul>

Here is the function which is getting active class

const RouteHelper = (url) => {
    return window.location.pathname === url ? "active" : null;
}
export default RouteHelper;

Answer 1

//At first you can create a css style.it is applied in the react router v6.

const navLinkStyles = ({isActive})=>{
        return{
            color:isActive?'lightgreen':'white',
            fontWeight:isActive?'bold': 'normal'}}

//Then apply this css in link

   
<NavLink as={Link} to='/manage' style={navLinkStyles} className="hidden md:block mx-5 text-gray-300  hover:text-white" >Manage Items</NavLink>