<NavLink
key={tab.id}
className={(navData) =>
navData.isActive ? styles.activeTab : styles.inactiveTab
}
to={tab.path}
>
{tab.name}
</NavLink><NavLink
to="/faq"
style={isActive => ({
color: isActive ? "green" : "blue"
})}
>
FAQs
</NavLink><li> <NavLink exact to='/' activeClassName="active-link">Home</NavLink> </li>
<li> <NavLink to='/' activeClassName="active-link" isActive={checkActive}>Home</NavLink> </li>
<div>
Screen1
<div>
<NavLink
to="/other"
exact
className={({ isActive }) => (isActive ? "selected" : "normal")}
>
other
</NavLink>
</div>
<Outlet></Outlet>
</div>
//css
.normal {
border: 2px solid green;
}
.selected {
border: 2px solid yellow;
}