使用 React Router 将类 active 添加到其他父 html 标签

我已经被困了几个小时来弄清楚如何在提供的 Reactrouter 标签的父 html 标签上添加 classActive 。这是代码， 使用React-Router“版本”：“3.2.6”

    <li className="sidebar-item">
        <div className="sidebar-link" activeClassName="active">
            <span>Track Page</span>

            <div className="collapse first-level">
                <Link className="first-level__link" to="/track-page" activeClassName="active">
                    Track Page 1
                </Link>

                <Link className="first-level__link" to="/track-page-2" activeClassName="active">
                    Track Page 2
                </Link>
            </div>

        </div>
    </li>

目前活跃类只能保持在<link>标签，但我需要它在<li>的父级<link>。我怎样才能做到这一点？请帮忙。

我对反应不太熟悉，所以，这里的任何帮助将不胜感激。先感谢您。

Use <NavLink>代替<Link>并将精确添加为属性

包含精确作为属性，以确保 activeClassName 仅在与您的位置完全匹配的 url 路径上触发

如果您想将活动类添加到作为父级的 li 标记中

您可以使用函数来获取 NavLinkClass 您可以使用 useLocation 来获取确切的位置

import { useLocation,NavLink } from "react-router-dom";

const location = useLocation();

 const getNavLinkClass = path => {
    return location.pathname === path
    ? "sidebar-item active"
    : "sidebar-item";
     };

 <li className={getNavLinkClass("/track-page")>
      <div className="sidebar-link">
        <span>Track Page</span>

        <div className="collapse first-level">
          <NavLink
            className="first-level__link"
            to="/track-page"
            activeClassName="active"
          >
            Track Page 1
          </NavLink>

          <NavLink
            className="first-level__link"
            to="/track-page-2"
            activeClassName="active"
          >
            Track Page 2
          </NavLink>
        </div>
      </div>
    </li>