React导航链接高亮异常：如何仅高亮当前页及直接父级？

需求说明 #

我有一个导航链接列表，当前处于某个页面时，需要高亮该页面对应的导航链接，仅需高亮其上一级页面的导航链接，具体规则：

• 所有页面路径：/blogs、blogs/careers、blogs/authors
• 当前页为/blogs/author时，需高亮：/blogs/author、/blogs
• 当前页为/blogs/author/Lauren-Stephenson时，需高亮：/blogs/author/Lauren-Stephenson、blogs/authors

当前实现问题 #

我写的React代码会错误地高亮父级的父级链接，比如当前页是/blogs/authors/Lauren-Stephenson时，不仅blogs/authors被正确高亮，/blogs也被错误高亮了。

当前代码：

import React from 'react';

const navlinks = ["/blogs", "blogs/careers", "blogs/authors"]
const currentPath = "/blogs/authors/Lauren-Stephenson"

export function App(props) {
  return (
    <div className='App'>
     {navlinks.map((links) => 
       <div style={{color: currentPath.includes(links) ? 'green' : 'white'}}>{links}</div>
     )}
    </div>
  );
}

错误场景示例 #

currentPage: /blogs/Authors/Lauren-Steph

/blogs (HIGHLIGHTED) 错误高亮！
/blogs/careers
/blogs/authors (HIGHLIGHTED) 正确

currentPage: /blogs/Authors

/blogs 
/blogs/careers
/blogs/authors (Correct) 正确

currentPage: /blogs

/blogs  (Correct) 正确
/blogs/careers
/blogs/authors

解决方案 #

核心是精确匹配当前路径的直接父级或自身，而非简单的字符串包含关系，通过拆分路径段对比层级来实现：

修正后的代码 #

import React from 'react';

const navlinks = ["/blogs", "blogs/careers", "blogs/authors"];
const currentPath = "/blogs/authors/Lauren-Stephenson";

// 辅助函数：将路径转为标准化的段数组
const getPathSegments = (path) => {
  // 去除首尾斜杠，按斜杠拆分并过滤空值
  return path.replace(/^\/|\/$/g, '').split('/').filter(seg => seg);
};

export function App(props) {
  const currentSegments = getPathSegments(currentPath);
  
  return (
    <div className='App'>
      {navlinks.map((link) => {
        const linkSegments = getPathSegments(link);
        const linkDepth = linkSegments.length;
        const currentDepth = currentSegments.length;
        
        let shouldHighlight = false;
        // 情况1：链接就是当前路径本身（完全匹配）
        if (linkDepth === currentDepth) {
          shouldHighlight = currentSegments.join('/') === linkSegments.join('/');
        }
        // 情况2：链接是当前路径的直接父级（层级少1，且前N段完全匹配）
        else if (linkDepth === currentDepth - 1) {
          shouldHighlight = currentSegments.slice(0, linkDepth).join('/') === linkSegments.join('/');
        }
        
        return (
          <div key={link} style={{color: shouldHighlight ? 'green' : 'white'}}>
            {link}
          </div>
        );
      })}
    </div>
  );
}

逻辑解释 #

1. 路径标准化：用getPathSegments统一处理所有路径，比如/blogs/authors/Lauren-Stephenson转为["blogs", "authors", "Lauren-Stephenson"]，blogs/authors转为["blogs", "authors"]，消除路径首尾斜杠的差异。
2. 层级匹配：
   • 若链接层级和当前路径层级一致，直接判断是否完全匹配（处理当前页就是导航项的场景）。
   • 若链接层级比当前路径少1，检查当前路径的前N段（N等于链接层级）是否和链接的所有段完全一致（这就是直接父级的判断逻辑）。
3. 仅满足上述两种情况的链接才会被高亮，彻底避免了父级的父级被误选的问题。

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