React中不使用NavLink自定义实现侧边栏激活状态的方案求助

原始代码 #

import React from "react";
import "./sidebar.css";
import { Link, NavLink } from "react-router-dom";
import { MdDashboard } from "react-icons/md";
import {
  FaUserAlt,
  FaListAlt,
} from "react-icons/fa";

const Sidebar = () => {
  return (
    <section className="component-sidebar">
      <div className="component-sidebar-nav">
        <ul>
          <li>
            <Link to="/">
              <div className="component-sidebar-nav-icon">
                <MdDashboard />
              </div>
              <div>Dashboard</div>
            </Link>
          </li>
          <li>
            <Link to="/my-profile">
              <div className="component-sidebar-nav-icon">
                <FaUserAlt />
              </div>
              <div>Profile</div>
            </Link>
          </li>
          <li>
            <Link to="/my-courses">
              <div className="component-sidebar-nav-icon">
                <FaListAlt />
              </div>
              <div>My Courses</div>
            </Link>
          </li>
        </ul>
      </div>
    </section>
  );
}

export default Sidebar;

问题描述 #

我现在想给侧边栏添加激活状态，但没找到合适的方案。我不想用NavLink，希望在React里自定义实现。如果有人能帮忙，我会非常感激，正在寻找解决方案，提前感谢！

解决方案 #

其实不用NavLink也能轻松实现，核心思路是借助React Router的useLocation钩子获取当前页面路径，然后给匹配路径的侧边栏项手动添加激活样式。具体步骤如下：

1. 导入useLocation钩子
   首先在组件顶部导入这个钩子：

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

2. 在组件内获取当前路径并编写匹配判断函数
   在Sidebar组件内部，先拿到当前路径，然后写一个辅助函数来判断当前项是否应该处于激活状态：

const Sidebar = () => {
  // 获取当前路由路径
  const location = useLocation();

  // 判断当前路径是否匹配目标路径
  const isActive = (path) => {
    // 根路径建议严格匹配，避免嵌套路径误触发
    if (path === "/") {
      return location.pathname === "/";
    }
    // 非根路径可以用startsWith适配嵌套场景（比如/my-courses/detail）
    return location.pathname.startsWith(path);
  };

  // ... 原有的return部分
}

3. 给侧边栏项添加激活类名
   给每个<li>标签（或者你想加样式的元素）根据isActive的返回值添加激活类名，比如我们用active作为激活类：

<li className={isActive("/") ? "active" : ""}>
  <Link to="/">
    <div className="component-sidebar-nav-icon">
      <MdDashboard />
    </div>
    <div>Dashboard</div>
  </Link>
</li>
<li className={isActive("/my-profile") ? "active" : ""}>
  <Link to="/my-profile">
    <div className="component-sidebar-nav-icon">
      <FaUserAlt />
    </div>
    <div>Profile</div>
  </Link>
</li>
<li className={isActive("/my-courses") ? "active" : ""}>
  <Link to="/my-courses">
    <div className="component-sidebar-nav-icon">
      <FaListAlt />
    </div>
    <div>My Courses</div>
  </Link>
</li>

4. 添加激活状态的CSS样式
   最后在你的sidebar.css里定义active类的样式，比如：

/* 给激活的侧边栏项添加背景和文字颜色 */
.component-sidebar-nav ul li.active {
  background-color: #e3f2fd;
  border-left: 3px solid #2196f3;
}

.component-sidebar-nav ul li.active div:last-child {
  color: #2196f3;
}

这样就完成了完全自定义的侧边栏激活状态，不需要依赖NavLink啦～

备注：内容来源于stack exchange，提问作者Asad Wali