如何使用动态条件设置活动链接文本颜色

我正在尝试构建一个动态导航栏,它有两个状态,一个是当你在主页上还没有滚动时,另一个是在主页上向下滚动或在任何其他页面上时。

我已将所有链接更新为正确的颜色,除非主页链接不在主页上时不会是黑色的。

import { useState, useEffect } from 'react'
import { NavLink, useLocation  } from 'react-router-dom'
import { RxHamburgerMenu } from "react-icons/rx";
import { FaTimes } from "react-icons/fa";
import { getImageURL } from '@/utils/image-utils'


function Navbar() {
 
  //  Nav is starting off false
  const [nav, setNav] = useState(false)
  // When user clicks Hamburger buttom, it gomes from false(!nav) to true(nav)
  const handleClick = () => setNav(!nav)
  // navBg is set to false on load as the user has not yet scrolled
  const [navBg, setNavBg] = useState(false);

  // Gets the current location of the route
  const location = useLocation()
  // sets isHome to true if user is at root
  const isHome = location.pathname === '/' ? true : false;

  // Toggles the navbg state if scrolled over 300 and back to false if otherwise
  const changeNavBg = () => {
    window.scrollY >= 300 ? setNavBg(true) : setNavBg(false);
  }

  // Monitors user scrolling and triggers check
  useEffect(() => {
    window.addEventListener('scroll', changeNavBg);
    return () => {
      window.removeEventListener('scroll', changeNavBg);
    }
  }, [])
  
  return (
      <nav className={`${isHome && navBg ? 'bg-white': 'bg-blue-500'} sticky top-0 z-50 xs:p-6 sm:p-6 md:p-6 lg:p-0 xl:p-0 ${!isHome ? 'bg-white': '' }`}>
      <div className="container mx-auto flex flex-wrap items-center justify-between ">
        <NavLink to="/" className="inline-block mr-4 py-0.5 text-xl whitespace-nowrap hover:no-underline focus:no-underline "><img src={`${isHome && !navBg ? getImageURL("logo-white.svg") : getImageURL("logo-blue.svg")}`}alt="" width="200" className='h-15'/></NavLink>

          {/* Hamburger or Close Icon */}
          
          <div className='lg:hidden z-10 ' onClick={handleClick}>
            { nav ? <FaTimes size={25} color='black'/> : <RxHamburgerMenu size ={25}/>}
            <ul className={`${
              nav 
              ? 'text-white opacity-100 transform translate-x-0'
              : 'opacity-0 transform -translate-y-full'} transition-transform absolute top-20 w-full h-screen left-0 flex flex-col justify-center items-center bg-black text-2xl
              `}>
              <NavLink to='/'><li className='p-2 hover:text-blue-500'>Home</li></NavLink>
              <NavLink to='/services/'><li className='p-2 hover:text-blue-500'>Services</li></NavLink>
              <NavLink to='/solutions/'><li className='p-2 hover:text-blue-500'>Solutions</li></NavLink>
              <NavLink to='/demos/'><li className='p-2 hover:text-blue-500'>Demos</li></NavLink>     
              <NavLink to='/about/'><li className='p-2 hover:text-blue-500'>About Us</li></NavLink>        
              <NavLink to='/contactus/'><li className='p-2 hover:text-blue-500'>Contact Us</li></NavLink>
            </ul>
          </div>
            
        <div className="hidden w-full lg:flex lg:w-auto lg:order-1" >  
          <ul className="flex flex-row justify-between space-x-6 p-4 mt-4 font-medium items-center align-middle ">
          <li>
            <NavLink to="/" className={`${isHome && !navBg? 'text-white':'text-blue-500'} ${!isHome ? 'text-black':''}`}>Home</NavLink>
          </li>
          <li>
            <NavLink to="/services/" className={`${location.pathname.includes('/services/') ? 'text-blue-500':'text-black'}`}>Services</NavLink>
          </li>
          <li>
            <NavLink to="/solutions/" className={`${location.pathname.includes('/solutions/') ? 'text-blue-500':'text-black'}`}>Solutions</NavLink>
          </li>
          <li>
            <NavLink to="/demos/" className={`${location.pathname.includes('/demos/') ? 'text-blue-500':'text-black'}`}>Demos</NavLink>
          </li>
          <li>
            <NavLink to="/about/" className={`${location.pathname.includes('/about/') ? 'text-blue-500':'text-black'}`}>About Us</NavLink>
          </li>
          <li>
            <NavLink to="/contactus/"><button type="button" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Contact Us</button></NavLink>          
          </li>
            
          </ul> 
        </div>
  
      </div>
    
    </nav>
    

  )
}

export default Navbar

唯一不起作用的链接是下面的项目,如果我们在主页上并且没有滚动,则第一个条件可以正常工作,将文本颜色设置为白色,当我们滚动时,它会更新为蓝色。但是,如果我们不在主页上,它不会触发并将文本更改为黑色。

<NavLink to="/" className={ ${是Home&navBg吗?'text-blue-500':'text-white'}${!是Home吗?'text black':'} }>Home</NavLink>

我的逻辑基于我为导航栏的背景颜色所使用的逻辑,它按预期工作。

<nav className={ ${isHome&navBg?'bg white':'bg-blue-500'}粘性top 0 z-50 xs:p-6 sm:p-6 md:p-6 lg:p-0 xl:p-0${!isHome?'bg-white':'} }>