How can I make my react router active route classname DRY-CodePudding

How do I stop the repetition of the nav-btn class in my react project?

I am using react-router-dom v6.

<NavLink
 to="/"
className={(navInfo) =>
navInfo.isActive ? 'nav-btn bg-green-700 text-white' : 'nav-btn'
}> Home</NavLink>

The picture given below

CodePudding user response：

that could be solved via a wrapper component, try this:


    function MyCustomNavLink({to, navInfo, children}) {
      return <NavLink to={to} classname={navInfo.isActive ? 'nav-btn bg-green-700 text-white' : 'nav-btn'}>{children}</NavLink>
    }