React Router NavLink Active

Question

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.

Does this answer your question? [Active link with React-Router?](https://stackoverflow.com/questions/41131450/active-link-with-react-router) — Stevan Tosic, Nov 06 '19 at 09:19
You want to navigate to the second link and first to stay active? Right? — Stevan Tosic, Nov 06 '19 at 09:24
I read this docs in isActive prop but don't know to use https://reacttraining.com/react-router/web/api/NavLink/isactive-func — nestorvananaz, Nov 06 '19 at 09:27

score 2 · Accepted Answer · answered Nov 06 '19 at 10:42

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

React Router NavLink Active

1 Answers1