Active class in react router

Question

Hi I am using react router v6 and I use NavLink to navigate from one component to another component. I want to add custom active class in NavLink how can I achieve in react router v6. I use this but its not working.

<NavLink className="px-3 py-2 bg-primary" to={"/"} activeClassName="btn-group-active" >
Home
</NavLink >

How to achieve above with react router v6.

I got my answer from this link.

Active link with React-Router?

I refer to the [docs](https://reactrouter.com/docs/en/v6/components/nav-link) for react-router v6. — Palladium02, Jul 11 '22 at 07:46
Does this answer your question? [React: Add active class to selected Nav link on click](https://stackoverflow.com/questions/52729059/react-add-active-class-to-selected-nav-link-on-click) — Mohit Sharma, Jul 11 '22 at 07:47

sm3sher · Answer 1 · 2022-07-11T08:03:50.397

0

You can achieve this by doing that:

<NavLink
  to={customPath}
  className={({ isActive }) => (isActive ? "myCssClass" : "")}
>
  <Home />
</NavLink>

If you have further classes you concat them like that:

<NavLink
  to={customPath}
  className={({ isActive }) => (isActive ? "myActiveClass defaultClass defaultClassTwo" : "defaultClass")}
>
  <Home />
</NavLink>

edited Jul 11 '22 at 08:03

answered Jul 11 '22 at 07:50

sm3sher

2,764
1
11
23

But I have three to four classes how to concat active class with another class. I hope you understand my question. – Muhammad Kamran Jul 11 '22 at 07:56
@MuhammadKamran Then store your classnames in a string inside your component and use the variable in the ternary operator. – Palladium02 Jul 11 '22 at 08:02
But I use ternary operator and add function isActive in ${} but it does not working. – Muhammad Kamran Jul 11 '22 at 08:03
@MuhammadKamran I've made an edit to my post. Does this answer your question? – sm3sher Jul 11 '22 at 08:04
But if link is not active then default classA and classB also not work. – Muhammad Kamran Jul 11 '22 at 08:08
I get solution and I edit my question – Muhammad Kamran Jul 11 '22 at 08:10

Active class in react router

1 Answers1