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

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

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

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

推荐答案

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

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

/companyShare
/companyTech

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

在你的情况下,是

/companyTech/techDetails     instead of /techDetails

enter image description here

Javascript相关问答推荐

如何在NightWatch.js测试中允许浏览器权限?

序列查找器功能应用默认值而不是读取响应

D3多线图显示1线而不是3线

我开始使用/url?q=使用Cheerio

如何从JSON数组添加Google Maps标记—或者如何为数组添加参数到标记构造器

使用下表中所示的值初始化一个二维数组

在网页上添加谷歌亵渎词

虚拟滚动实现使向下滚动可滚动到末尾

如何使用JS创建一个明暗功能按钮?

如何 for each 输入动态设置输入变更值

SPAN不会在点击时关闭模式,尽管它们可以发送日志(log)等

无法避免UV:flat的插值:非法使用保留字"

AJAX POST在控制器中返回空(ASP.NET MVC)

Pevent触发material 用户界面数据网格中的自动保存

在范围数组中查找公共(包含)范围

如何将对象推送到firestore数组?

使用Java脚本替换字符串中的小文本格式hashtag

在HTML中使用meta标记来指定定制元数据以用于使用JavaScript进行检索是不是一个坏主意?

MAT-TREE更多文本边框对齐问题

如何在预览中显示html+css与数据URL?