突出顯示當前和上一級 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'}}

它將確保它不一樣，如果不是這種情況，您可以根據需要將它從等於更改為 < 或 >