title: react-scroll target element not found
body: <p>I have a <code>Navbar</code> React component with a <code>Link</code> component which needs to scroll down to <code>Section</code> component when clicked. I have implemented <code>react-scroll</code>, however, when I click on the <code>Link</code> component, I get <code>target element not found</code> in the browser console.</p>
  
  <p>The Navbar component:</p>
  
  <pre><code>import React, { Component } from "react";
  import { Link, animateScroll as scroll, scroller } from "react-scroll";
  
  class Navbar extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;Link to="section1" activeClass="active" spy={true} smooth={true}&gt;
                Section 1
              &lt;/Link&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Navbar;
  </code></pre>
  
  <p>And the App.js file:</p>
  
  <pre><code>import React from "react";
  
  // Styling
  import "./styles/App.css";
  
  // Components
  import Navbar from "./components/Navbar";
  import SectionOne from "./components/SectionOne";
  
  function App() {
    return (
      &lt;div className="App"&gt;
        &lt;div&gt;
          &lt;Navbar /&gt;
          &lt;SectionOne id="section1"/&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>I used <a href="https://github.com/jamesqquick/React-With-Smooth-Scrolling" rel="nofollow noreferrer">this repo</a> as a reference, however, things don't work. What have I missed here?</p>