突出显示当前和上一级 URL

Question

我有一个导航链接列表。 当我在某个页面上时，应突出显示该导航链接。 我还希望页面向上（仅）一个级别也突出显示其导航链接，因此：

All pages: /blogs, blogs/careers, blogs/authors

Page: /blogs/author
Highlight: /blogs/author, /blogs

Page: /blogs/author/Lauren-Stephenson
Highlight: /blogs/author/Lauren-Stephenson, blogs/authors

我是这样做的：

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>
  );
}

但是我的代码不仅高亮了/blogs/Authors/ ，它还高亮了/blogs ，这是不正确的，因为我只想高亮上一级的页面。

我怎样才能做到这一点？

Answer 1

所以也许添加这个条件可能会对你有所帮助！

style={{color: currentPath.includes(links) && currentPath.length!==links.length ? 'green' : 'white'}}

它将确保它不一样，如果不是这种情况，您可以根据需要将它从等于更改为 < 或 >