如何保持NavLink活动，即使其他链接被点击？

Question

在一个React项目中，我试图保持NavLink活动，即使其他任何链接都被点击并导航到它。为了更清晰起见，请参考下面的代码。

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>
  );
};

单击页面中的按钮后，导航到另一个屏幕，侧菜单将失去活动背景色。我的意图是使它活跃，无论其他链接被点击。什么是最好的解决方案？

请使用用户名和密码作为“测试”输入

Answer 1

如果其他路由与当前父路由(侧栏)路由相关，请确保其他路由遵循父路由。

在你的项目中。父路径是

/companyShare
/companyTech

现在，如果要在/companyTech路由中使用其他路由，则必须从/companyTech开始。

在你的例子中，是

/companyTech/techDetails     instead of /techDetails

​

​