CODEWITHSUNDEEP
reactjsreact-routerreact-router-v4
nestorvananaz
nestorvananaz

Reputation: 65

React Router NavLink Active

I am new to react and react-router. I have a sidebar that has a route link to store information details.

// Sidebar Link

<NavLink to=“/store/information/details”>Information</NavLink>

Inside store information details container has a button link route to edit store information that looks like this

// Link to Edit Information

<NavLink to=“/store/information/edit”>Edit Information</NavLink>

The problem is I want the sidebar link information to stay active when navigating to edit store information container. When I am inside edit store information container the active class is removed.

Upvotes: 1

Views: 230

Answers (1)

Shahab Emami
Shahab Emami

Reputation: 324

you can write isActive of your Navlink like this: 

 isActive={(match, location) => {
 return location.pathname.includes("/store/information/");
    }}

so your whole Navlink would be like this:

      <NavLink
    to="/store/information/details"
    activeClassName="active"
    isActive={(match, location) => {
      return location.pathname.includes("/store/information/");
    }}
  >
    information page
  </NavLink>

you can find a complete example in the code sandbox that I have provided for you:

https://codesandbox.io/s/mystifying-haze-13477

more resources:
https://reacttraining.com/react-router/web/api/NavLink/isactive-func

let me know if you still have any problem with it

Upvotes: 2

Related Questions