react-找不到滚动目标元素

Question

我有一个带有Link组件的Navbar React组件，它需要在单击时向下滚动到Section组件。我已经实现了react-scroll，但是，当我单击Link组件时，会在浏览器控制台中看到target element not found。

导航栏组件：

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

class Navbar extends Component {
  render() {
    return (
      <div>
        <ul>
          <li>
            <Link to="section1" activeClass="active" spy={true} smooth={true}>
              Section 1
            </Link>
          </li>
        </ul>
      </div>
    );
  }
}

export default Navbar;

和App.js文件：

import React from "react";

// Styling
import "./styles/App.css";

// Components
import Navbar from "./components/Navbar";
import SectionOne from "./components/SectionOne";

function App() {
  return (
    <div className="App">
      <div>
        <Navbar />
        <SectionOne id="section1"/>
      </div>
    </div>
  );
}

export default App;

我使用了this repo作为参考，然而，事情并不起作用。这里我错过了什么？

Answer 1

我已经在SectionOne组件中实现了一个div

<div id="section-one-wrapper">Section One content...</div>

然后在Link组件中指定该id：

<Link to="section-one-wrapper" activeClass="active" spy={true} smooth={true}>
    Section 1
</Link>

而且它起作用了。