React.js中动态渲染的活动链接无法高亮怎么解决？

问题根源 #

你当前的高亮逻辑不生效，核心是路径比对不匹配：

• splitted[1]是从pathname拆分后得到的不带斜杠的路径段（比如pathname='/Details'拆分后，splitted[1]是'Details'）
• 而link.path是带开头斜杠的完整路径（比如'/Details'）
  两者进行全等比对时，'Details' === '/Details'永远为false，所以高亮样式永远不会触发。

修复方案 #

方案1：修正路径比对逻辑

直接调整比对的两边，让格式统一：

const renderedLinks = links.map((link) => {
  return (
    <Link
      // 把link.path去掉开头的斜杠，和splitted[1]匹配
      className={splitted[1] === link.path.slice(1)
        ? "bg-red-800 rounded-full hover:text-white"
        : "hover:bg-blue-800 rounded-full hover:text-white"
      }
      key={link.label}
      to={link.path}
    >
      {link.label}
    </Link>
  )
});

或者反过来，给splitted[1]加上斜杠再比对：

className={`/${splitted[1]}` === link.path ? "bg-red-800 rounded-full hover:text-white" : "hover:bg-blue-800 rounded-full hover:text-white"}

方案2：用React Router自带的NavLink更省心

react-router-dom@6提供的<NavLink>组件自带激活状态判断，无需手动拆分路径，用法更简洁：

import { NavLink } from 'react-router-dom';

const renderedLinks = links.map((link) => {
  return (
    <NavLink
      // 用回调函数自定义激活/非激活样式
      className={({ isActive }) => 
        isActive 
          ? "bg-red-800 rounded-full hover:text-white" 
          : "hover:bg-blue-800 rounded-full hover:text-white"
      }
      key={link.label}
      to={link.path}
    >
      {link.label}
    </NavLink>
  )
});

NavLink会自动根据当前路由判断isActive状态，完全替代你手动拆分路径的逻辑，还能避免路径格式不一致的问题。

内容的提问来源于stack exchange，提问作者Peter Double U