How to keep NavLink active even though other links are clicked?

Viewed 42

In a React project, I'm trying to keep NavLink active even though any other links are clicked and navigated to it. Please refer to the code below for better clarity.

const LeftMenu = () => {
  return (
    <div className="side-navbar active-nav d-flex justify-content-between flex-wrap flex-column">
      <div>
        <ul className="btn-toggle-nav list-unstyled fw-normal small">
          <li className="nav-item-dropdown">
            <span className="mx-3">
              <NavLink to={companyShares} className="dropdown-nav-link px-3">
                COMPANY SHARES
              </NavLink>
            </span>
          </li>

          <li className="nav-item-dropdown">
            <span className="mx-3">
              <NavLink to={companyTech} className="dropdown-nav-link px-3">
                COMPANY TECH
              </NavLink>
            </span>
          </li>
        </ul>
      </div>
    </div>
  );
};

When clicked on button in a page, navigates to another screen, the side menu loses active background color. My intention is to make it active, whatever other links are clicked. What could be the best solution?

Please use username and password as 'test' to enter

1 Answers

If the other route is related with your current parent (sidebar) route, make sure other route follows the parent route.

Eg: In you project. parent routes are

/companyShare
/companyTech

Now, if you are going to some other route inside /companyTech route, it has to start with /companyTech.

In your case, it is

/companyTech/techDetails     instead of /techDetails

enter image description here

Related