如何将“活动”类添加到当前活动的导航项？ [复制]

Question

所以我有这个侧边栏，它有通往应用程序不同页面的路线。在悬停时，我将li 设置为带有右边框和相同颜色的图标。现在我一直在尝试将活动类添加到当前活动的路径中，其样式与 li （右边框和图标颜色）相同。但我做不到。

我已经尝试过post 的解决方案，但似乎没有任何效果。我尝试使用来自react-router-dom 的NavLink 并添加了activeClassName，但它不起作用。

这是代码的当前状态：

const Sidebar = () => {
    return (
        <div className={style.sidebarContainer} >

            <li className={style.navItem} >
                  <Link to='/' activeClassName="active" >
                        <PersonIcon />
                  </Link>
            </li>

            <li className={style.navItem}>
                  <Link to='/example1' activeClassName="active" >
                        <SettingsIcon />
                  </Link>
            </li>

            <li className={style.navItem}>
                  <Link to='/example2' activeClassName="active" >
                        <LightModeIcon />
                  </Link>
            </li>

        </div>
    )
}

这是样式表：

.sidebarContainer{
    background: black;
}

.sidebarContainer a{
    text-decoration: none;
    color: gray;
    width: 100%;
} 

.navItem {
    width: 100%;
    padding: 1rem 0;
    cursor: pointer;
    border-right: 4px solid transparent;
    transition: all 0.3s ease 0s !important;
    list-style: none;
    padding-left: 1.3rem;
    display: flex;
    align-items: center;
}

.navItem:hover {
    border-right: 4px solid red;
}

.navItem:hover svg {
    color: red;
}

.navItem svg {
    font-size: 1.6rem !important;
    transition: all 0.3s ease 0s !important;
}

它的外观如下：

Answer 1

您需要将 Link 替换为 NavLink 。当与当前 URL 匹配时，NavLink 将向呈现的元素添加样式属性。

喜欢

           <li className={style.navItem} >
                  <NavLink to='/' activeClassName="active" >
                        <PersonIcon />
                  </NavLink>
            </li>

            <li className={style.navItem}>
                  <NavLink to='/example1' activeClassName="active" >
                        <SettingsIcon />
                  </NavLink>
            </li>

            <li className={style.navItem}>
                  <NavLink to='/example2' activeClassName="active" >
                        <LightModeIcon />
                  </NavLink>
            </li>

here 是文档链接

Answer 2

Link 或 NavLink 组件返回一个 a HTML 标记。所以当你在写下面的代码时，

<Link to="/home">Home</Link>

原来是 DOM 上的以下标记，

<a href="/home">Home</a>

所以active 类实际上添加了a 标签，而不是li 标签。

<a href="/home" class="active">Home</a>

考虑到这种方法，我们必须设置 CSS 样式。

但我们有一个问题！由于我们使用css-modules，样式文件中的类将由库转换以确保本地范围。所以.navItem 类将被转换为_src_app_module__navLink 之类的东西。所以我们必须将我们的活动类作为style.active 传递给NavLink 组件，

<NavLink to='/' activeClassName={style.active} >
   <PersonIcon />
</NavLink>

请使用NavLink 代替Link 组件

您的 css 上的以下更新应该可以工作。

.navItem a{
    width: 100%;
    padding: 1rem 0;
    cursor: pointer;
    border-right: 4px solid transparent;
    transition: all 0.3s ease 0s !important;
    list-style: none;
    padding-left: 1.3rem;
    display: flex;
    align-items: center;
}

.navItem a:hover,
.navItem a.active {
    border-right: 4px solid red;
}

.navItem a:hover svg,
.navItem a.active svg {
    color: red;
}

在这里我尽可能地复制了你的代码 - https://codesandbox.io/s/pedantic-field-kwj1t