React-scroll：Nav链接不会滚动到同一页面的不同部分

Question

我正在使用react-scroll制作一个导航栏，当单击链接但链接不起作用时，该导航栏会滚动到同一页面的不同部分。他们在单击时不执行任何操作，因此我的代码一定存在问题。我需要在代码中进行哪些更改才能使其正常工作？

Navbar.js

import React, { Component } from "react";
import { Link, animateScroll as scroll } from "react-scroll";

export default class Navbar extends Component {
  scrollToTop = () => {
    scroll.scrollToTop();
  };

  render() {
    return (
      <nav>
          <button
            className="nav-btn"
            onClick={this.scrollToTop}
          >Top</button>
          <ul className="nav-items">
            <li className="nav-item">
              <Link
                activeClass="active"
                to="section1"
                spy={true}
                smooth={true}
                offset={-70}
                duration={500}
              >
                About
              </Link>
            </li>

App.js

 <div className="App">
    <Navbar />
        <Section>
          <Home />
        </Section>

        <Section children={About}>
        <About />
        </Section>

        <Section children={Portfolio}>
        <Portfolio />
        </Section>

        <Section children={Contact}>
        <Contact />
        </Section>
      </div>

Section.js

export default function Section({children }) {
  return (
<nav>
    <div>
      <div>{children}</div>
      </div>
</nav>
  );
}