React js app側邊欄所選項目未突出顯示

Question

我用側邊欄創建了這個反應應用程序，它看起來很不錯，但我想不通的一件事是如何標記被點擊的項目（頁面鏈接）。

這是代碼，我將activeClassName="selected"添加到 SidebarLink const，並將其添加到 styled-component，但它不起作用。

import React, { useState } from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";

const SidebarLink = styled(Link)`
  /*border: 3px solid green;*/
  display: flex;
  color: #e1e9fc;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  list-style: none;
  height: 60px;
  text-decoration: none;
  font-size: 18px;
  
  &:hover {
    background: #252831;
    border-left: 4px solid #ffbc2e;
    cursor: pointer;
  }

  .selected {
    color: red;
  }
`;
  
const SidebarLabel = styled.span`
  margin-left: 16px;
`;

/* Used for Training dropdown */
const DropdownLink = styled(Link)`
  /*border: 3px solid red;*/
  background: #252831;
  height: 60px;
  padding-left: 3rem;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #f5f5f5;
  font-size: 16px;
  font-weight: bold;
  
  &:hover {
    background: #48526F;
    border-left: 4px solid #ffbc2e;
    cursor: pointer;
  }
`;

const SubMenu = ({ item }) => {
  const [subnav, setSubnav] = useState(false);
  
  const showSubnav = () => setSubnav(!subnav);
  
  return (
    <>
      <SidebarLink to={item.path} onClick={item.subNav && showSubnav} activeClassName="selected" exact>
        <div className="sidebarTextContainer">
          <div className="sidebarIcon">{item.icon}</div>
          <div className="sidebarText"><SidebarLabel>{item.title}</SidebarLabel></div>
        </div>
        <div>
          {item.subNav && subnav
            ? item.iconOpened
            : item.subNav
            ? item.iconClosed
            : null}
        </div>
      </SidebarLink>
      {subnav &&
        item.subNav.map((item, index) => {
          return (
              <DropdownLink to={item.path} key={index}>
                {item.icon}
                <SidebarLabel>{item.title}</SidebarLabel>
              </DropdownLink>
          );
        })}
    </>
  );
};
  
export default SubMenu;

有人知道如何解決這個問題嗎？

Answer 1

即使您詢問是否記住單擊了哪個項目，我認為您真正想要的是與當前頁面對應的鏈接被突出顯示為活動的。

如果你使用 react-router v6，你應該使用NavLink而不是Link ( docs )。

<NavLink>是一種特殊的<Link> ，它知道它是否處於“活動狀態”。 默認情況下， active類會在<NavLink>組件處於活動狀態時添加到該組件。

您應該更新導入的組件並刪除activeClassName 。

const SidebarLink = styled(NavLink)`
  // ...
  &.active {
    color: red;
  }
`

// ...

<SidebarLink to={item.path} onClick={item.subNav && showSubnav} exact>
  ...
</SidebarLink>

---

如果您使用的是 react-router v5，那么您也應該使用NavLink但您必須傳遞activeClassName ，就像您在示例中所做的那樣。 在這種情況下，您只需將Link替換為NavLink 。

另請注意，您嵌套的 CSS 語法不正確。 它應用於SidebarLink的孩子，而不是SidebarLink本身。 你想替換.selected { color: red; } .selected { color: red; }與&.selected { color: red } 。