React侧边栏点击菜单项切换激活类修改选中项背景样式实现咨询

你可以直接使用react-router提供的NavLink组件实现自动激活判断，无需手动维护点击状态，修改步骤如下： #

步骤1：替换导入组件 #

将原来导入的Link替换为NavLink：

// 原来的导入
// import { Link } from 'react-router-dom'
// 替换为
import { NavLink } from 'react-router-dom'

步骤2：修改菜单项结构 #

利用NavLink的内置激活状态回调，动态切换li的样式，完整修改后的组件代码如下：

import React from 'react'
import { NavLink } from 'react-router-dom'
// 其他导入（Logo、FontAwesomeIcon等）保持不变

export default class Sidebar extends React.Component {
  render() {
    function hideBar() {
      var sidebar = document.querySelector(".sidebar");
      sidebar.classList.remove("show");
      sidebar.classList.add("hide");
    }
    return (
      <>
        <div className="sidebar" style={styles.header}>
          <a className="close-icon" href="#" onClick={hideBar}>
            &#10006;
          </a>
          <img src={Logo} alt="" />

          <ul style={styles.lists}>
            {/* 第一个菜单项 */}
            <NavLink to="/doctor" style={{textDecoration: 'none', color: '#fff'}}>
              {({isActive}) => (
                <li style={isActive ? styles.listItemActive : styles.listItem}>
                  <div>
                    <FontAwesomeIcon
                      icon={faThLarge}
                      style={{ marginRight: "1rem" }}
                    />
                  </div>
                  <div> Overview</div>
                </li>
              )}
            </NavLink>

            {/* 第二个菜单项 */}
            <NavLink to="/dappointment" style={{textDecoration: 'none', color: '#fff'}}>
              {({isActive}) => (
                <li style={isActive ? styles.listItemActive : styles.listItem}>
                  <div>
                    <FontAwesomeIcon
                      icon={faBriefcaseMedical}
                      style={{ marginRight: "1rem" }}
                    />
                  </div>
                  <div> Appointments</div>
                </li>
              )}
            </NavLink>

            {/* 第三个菜单项 */}
            <NavLink to="/dall_clients" style={{textDecoration: 'none', color: '#fff'}}>
              {({isActive}) => (
                <li style={isActive ? styles.listItemActive : styles.listItem}>
                  <div>
                    <i className="fa fa-user" style={{ marginRight: "1rem" }}></i>
                  </div>
                  <div> All Clients List</div>
                </li>
              )}
            </NavLink>

            {/* 第四个菜单项 */}
            <NavLink to="#" style={{textDecoration: 'none', color: '#fff'}}>
              {({isActive}) => (
                <li style={isActive ? styles.listItemActive : styles.listItem}>
                  <div>
                    <FontAwesomeIcon
                      icon={faSms}
                      style={{ marginRight: "1rem" }}
                    />
                  </div>
                  <div>Messages</div>
                </li>
              )}
            </NavLink>
          </ul>
          <div
            style={{
              position: "absolute",
              bottom: "3rem",
              left: "30px",
              width: "15%",
            }}
          >
            <div style={{ marginTop: "3rem" }}>
              <button
                style={{
                  color: "#fff",
                  textDecoration: "none",
                  background: "transparent",
                  border: "none",
                }}
              >
                <FontAwesomeIcon icon={faCog} style={{ marginRight: "1rem" }} />
                Settings
              </button>
            </div>
          </div>
        </div>
      </>
    );
  }
}

// 原有styles保持不变
const styles = {
  header: {
    background: "#ffffff1c 0% 0% no-repeat padding-box",
    padding: "2rem",
    minHeight: "100%",
    width: "20%",
    margin: "0",
    color: "white",
  },
  lists: {
    marginTop: "5rem",
    color: "#fff",
    paddingLeft: "0",
    listStyle: "none",
  },
  listItem: {
    background: "transparent",
    padding: "10px 50px",
    borderRadius: "10px",
    cursor: "pointer",
    display: "flex",
  },
  listItemActive: {
    background: "#6a0f4b",
    padding: "10px 50px",
    borderRadius: "10px",
    cursor: "pointer",
    display: "flex",
  },
};

可选补充：自定义激活匹配规则 #

如果路径不完全相等也需要激活的场景，可以给NavLink添加end属性（react-router v6）控制是否精确匹配，或者通过isActive属性自定义判断逻辑：

<NavLink to="/doctor" isActive={(match, location) => {
  // 示例：所有/doctor开头的路径都激活当前菜单项
  return location.pathname.startsWith('/doctor')
}}>
  {/* 菜单项内容 */}
</NavLink>

内容的提问来源于stack exchange，提问作者meon ks