React NavLink active classname on detail page

user_15295971 0
Viewed 39

I am using NavLink on navbar, so I can use activeClassName property and it can add active class on my navbar. But my problem is when I enter a detail page, I can't see active class anymore. Let me show you with some photos for better understanding.

Normal Page :

enter image description here

When, I click a service from cards its going to detail page.

enter image description here

What I want : When I click a detail card Services part should be active still. What can I do about that ?

My Navbar: (I am making that navbar from an array that's why it have x. X is my 1 element.)

<NavLink
  activeClassName="active-nav"
  exact
  key={x.key}
  className="   text-white truncate  flex self-center items-center lg:px-5 xl:px-6 2xl:px-10  "
  style={{ fontSize: "17px", lineHeight: "28px" }}
  to={x.Link}
  >
    {x.Name}
</NavLink>
reactjs css html javascript
1 Answers

You just have to remove exact from the NavLink

              <NavLink
                activeClassName="active-nav"
                key={x.key}
                className="   text-white truncate  flex self-center items-center lg:px-5 xl:px-6 2xl:px-10  "
                style={{ fontSize: "17px", lineHeight: "28px" }}
                to={x.Link}
              >
                {x.Name}
              </NavLink>

And then when you render the detail page, it should be rendered as the child of the Service Page. For example if localhost:3000/treatments is your service page url then the detail page should be localhost:3000/treatments/detail?id=1

user_70609760
Related