0

我想在页面加载时在第一个导航项上应用一个活动类。

但是现在，第一个导航项在页面重新加载时没有突出显示。它仅在我滚动时突出显示，当我单击最后一个导航项时，它会突出显示前一个导航项而不是当前导航项。

这是我的导航栏

import logo from '../logo.svg';
import { Link, animateScroll } from 'react-scroll';

const Navbar = () => {
  return (
    <nav className='nav' id='navbar'>
      <div className='nav-content'>
        <img
          src={logo}
          className='nav-logo'
          alt='Logo.'
          onClick={() => animateScroll.scrollToTop()}
        />

        <ul className='nav-items'>
          <li className='nav-item'>
            <Link
              activeClass='active'
              to='section1'
              spy={true}
              smooth={true}
              offset={-70}
              duration={500}
            >
              Section 1
            </Link>
          </li>
          <li className='nav-item'>
            <Link
              activeClass='active'
              to='section2'
              spy={true}
              smooth={true}
              offset={-70}
              duration={500}
            >
              Section 2
            </Link>
          </li>
          <li className='nav-item'>
            <Link
              activeClass='active'
              to='section3'
              spy={true}
              smooth={true}
              offset={-70}
              duration={500}
            >
              Section 3
            </Link>
          </li>
          <li className='nav-item'>
            <Link
              activeClass='active'
              to='section4'
              spy={true}
              smooth={true}
              offset={-70}
              duration={500}
            >
              Section 4
            </Link>
          </li>
          <li className='nav-item'>
            <Link
              activeClass='active'
              to='section5'
              spy={true}
              smooth={true}
              offset={-70}
              duration={500}
            >
              Section 5
            </Link>
          </li>
        </ul>
      </div>
    </nav>
  );
};

export default Navbar;

这是我的部分组件

const Section = ({ title, subtitle, id, color }) => {
  return (
    <div className={`section section-${color}`} id={id}>
      <div className='section-content'>
        <h1>{title}</h1>
        <p>{subtitle}</p>
      </div>
    </div>
  );
};

export default Section;

我在这里缺少什么？

4

0 回答 0