React Router V6 activeStyle issues - react-router

Question

So my issue is that i have read the documentation and it sais that my button should be like this:
<NavLink
style={({ isActive }) =>
isActive ? activeStyle : undefined
}
to="overview"
className="group flex items-center px-2 py-2 text-base font-medium rounded-md"
>
Overview
</NavLink>
And that I should add:
let activeStyle = {
textDecoration: "underline",
};
let activeClassName = "underline";
but the issue is that I'm using Tailwind, and I have no idea on how to change the "let activeStyle". I cant add
let activeStyle = {
textDecoration: "bg-gray-900 text-white",
};
let activeClassName = "underline";
which is what is intended.. can anyone please help with this?.

Answer 1

I believe Tailwind works with CSS classes if I'm not mistaken. The logic should be applied to the className prop.
Example:
<NavLink
to="overview"
className={({ isActive }) =>
[
"group flex items-center px-2 py-2 text-base font-medium rounded-md",
isActive ? "bg-gray-900 text-white" : null,
]
.filter(Boolean)
.join(" ");
}
>
Overview
</NavLink>

Answer 2

Try doing it like this, should work.
<Navlink to="/overview" className={(navData)=> navData.isActive ? "bg-gray-900 text-white" : null }> <a className="group flex items-center px-2 py-2 text-base font-medium rounded-md">Overview</a></Navlink>

Answer 3

Navlink provides activeClassName props in which you can put your classes
Also use exact keyword so it will get active when url will match
Your code can be written as below:

Answer 4

using react-router 6, className (or style) props can take a function as argument.
Quoting the docs example:
https://reactrouter.com/en/6.8.1/components/nav-link
Using style
<NavLink
to="messages"
style={({ isActive }) =>
isActive ? activeStyle : undefined
}
>
Messages
</NavLink>
Notice the ({ isActive }) syntax (we are destructuring the argument)
Using className
<NavLink
to="tasks"
className={({ isActive }) =>
isActive ? activeClassName : undefined
}
>
Tasks
</NavLink>
Or using a function to render the component
<NavLink to="tasks">
{({ isActive }) => (
<span
className={
isActive ? activeClassName : undefined
}
>
Tasks
</span>
)}
</NavLink>
To answer the original question, let's say we want to apply the tailwind class "bg-red-400 underline" when the element is active and "bg-neutral-400" when it is inactive and having some permanent styles, we could do (using clsx which is a utility to combine class names):
<NavLink
to="overview"
className={({ isActive }) => clsx(
"group flex items-center px-2 py-2 text-base font-medium rounded-md",
isActive ? "bg-red-400 underline" : "bg-neutral-400"
)}
>
Overview
</NavLink>