繁体   English   中英

突出显示当前和上一级 URL

[英]Highlight current and up-one-level URL

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

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 ,这是不正确的,因为我只想高亮上一级的页面。

我怎样才能做到这一点?

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

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

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

①如果本文未解决您的问题,请点击查看与本文相关的问题
②如果本文未解决您的问题,请向程序员专用AI小助手提问
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM