title: ReactRouter navigation in a landing page
body: <p>I couldn't find a similar answer for the feature that I'm trying so I am making a new question.</p>
  <p>I am trying to achieve navigation with react-router in a landing page. For example, I have my menu with 3 pages &quot;Home, Projects and Contact&quot;. If I click in Projects would scroll down to the part of website where it'll be displayed my &quot;Projects&quot; component and not completely change the page and only display this component.</p>
  <p>I know that in HTML/CSS pure I could set the  but how would be this with react?</p>
  <p>Here is my App.js:</p>
  <pre><code>        &lt;Route path=&quot;/&quot; exact component={Main} /&gt;
          &lt;Route path=&quot;/about&quot; exact component={About} /&gt;
          &lt;Route path=&quot;/projects&quot; exact component={Projects} /&gt;
          &lt;Route path=&quot;/contact&quot; exact component={Contact} /&gt;
          &lt;Route path=&quot;*&quot; exact component={PageNotFound} /&gt;
        &lt;/Switch&gt;
  </code></pre>
  <p>Menu component:</p>
  <pre><code>&lt;header&gt;
        &lt;div className=&quot;container-menu container-nav&quot;&gt;
          &lt;div className=&quot;logo&quot;&gt;
            &lt;img
              className={`logo${showMenu ? &quot; logoHidden&quot; : null}`}
              src={logo}
              alt=&quot;&quot;
            /&gt;
          &lt;/div&gt;
          &lt;nav className={`topnav${showMenu ? &quot; responsive&quot; : &quot;logo&quot;}`}&gt;
            &lt;ul&gt;
              &lt;li className=&quot;icon&quot;&gt;
                &lt;img
                  onClick={() =&gt; {
                    display();
                  }}
                  src={burgerMenu}
                  alt=&quot;logo&quot;
                  className=&quot;img&quot;
                /&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href=&quot;/&quot;&gt;Home&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href=&quot;/projects&quot;&gt;Projects&lt;/a&gt;
              &lt;/li&gt;
              &lt;li className=&quot;contact&quot;&gt;
                &lt;a href=&quot;/contact&quot;&gt;Contact&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/nav&gt;
        &lt;/div&gt;
      &lt;/header&gt;
  </code></pre>