如何在使用react滚动组件时突出显示导航菜单？

import React from 'react';
import { Link, Element, scroller } from 'react-scroll';

class NavigationMenu extends React.Component {
  scrollToSection = (section) => {
    scroller.scrollTo(section, {
      duration: 800,
      delay: 0,
      smooth: 'easeInOutQuart',
    });
  };

  render() {
    return (
      <nav>
        <ul>
          <li>
            <Link
              activeClass="active"
              to="section1"
              spy={true}
              smooth={true}
              offset={-70}
              duration={500}
              onClick={() => this.scrollToSection('section1')}
            >
              Section 1
            </Link>
          </li>
          <li>
            <Link
              activeClass="active"
              to="section2"
              spy={true}
              smooth={true}
              offset={-70}
              duration={500}
              onClick={() => this.scrollToSection('section2')}
            >
              Section 2
            </Link>
          </li>
          <li>
            <Link
              activeClass="active"
              to="section3"
              spy={true}
              smooth={true}
              offset={-70}
              duration={500}
              onClick={() => this.scrollToSection('section3')}
            >
              Section 3
            </Link>
          </li>
        </ul>
      </nav>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <NavigationMenu />
        <Element name="section1" className="section">
          Section 1 Content
        </Element>
        <Element name="section2" className="section">
          Section 2 Content
        </Element>
        <Element name="section3" className="section">
          Section 3 Content
        </Element>
      </div>
    );
  }
}

export default App;