如何在其他链接被点击的情况下保持NavLink活动?

vsikbqxv  于 2022-09-21  发布在  其他
关注(0)|答案(1)|浏览(141)

在Reaction项目中,我试图保持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>
  );
};

当点击页面中的按钮,导航到另一个屏幕时,侧边菜单将失去活动的背景颜色。我的目的是让它变得活跃,无论点击了什么其他链接。最好的解决方案是什么?

请参考codesandbox链接-->https://codesandbox.io/s/little-platform-4n5icj?file=/src/pages/left-menu/LeftMenu.js:176-936

请使用用户名和密码作为‘test’进入

xqk2d5yq

xqk2d5yq1#

如果另一条路由与您当前的父(侧边栏)路由相关,请确保其他路由遵循父路由。

例句:在你的项目中。父路由为

/companyShare
/companyTech

现在,如果您要转到/pananyTech路径内的其他路径,它必须以/pananyTech开头。

在你的情况下,是

/companyTech/techDetails     instead of /techDetails

相关问题