突出显示当前和上一级 URL

Question

I have a list of navlinks. When I'm on a certain page, that navlink should be highlighted. I also want the page up (only) one level to have its navlink highlighted as well, so:

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

Here's how I'm doing it:

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

But my code not only highlights /blogs/Authors/ , it also highlights /blogs , which is incorrect, because I only want the page up one level to be highlighted.

How can I do this?

Answer 1

so maybe adding this condidtion might help you!

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

it will be sure that it's not the same, if this wasn't the case you can change it from equals to < or > based on your need