Javascript 反应滚动：活动类未应用于页面的第一个和最后一个部分

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

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

这是我的导航栏

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;

从“../logo.svg”导入徽标；
从“react scroll”导入{Link，animateScroll}；
常量导航栏=（）=>{
返回(
animateScroll.scrollToTop（）}
/>


第一节


第二节


第三节


第四节


第五节


);
};
导出默认导航栏；

这是我的部分组件

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;

const Section=（{title，subtitle，id，color}）=>{
返回(
{title}
{副标题}

);
};
导出默认部分；

我错过了什么