react-scroll target element not found

Question

I have a Navbar React component with a Link component which needs to scroll down to Section component when clicked. I have implemented react-scroll, however, when I click on the Link component, I get target element not found in the browser console.

The Navbar component:

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;

And the App.js file:

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;

I used this repo as a reference, however, things don't work. What have I missed here?

Answer 1

I have implemented a div inside of the SectionOne component

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

and then specified that id in the Link component:

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

and it worked.