title: How to navigate to another page with a smooth scroll on a specific id with react router and react scroll
body: <p>i am trying to make navBar that navigate to another page and scroll down to some id on this page </p>
  
  <p>this is the navBar component for my protofolio whih have  3 links the <code>Projects</code> should go to <code>Home</code> and then scroll down to <code>projects</code> id in the Project section </p>
  
  <pre><code>import React, { Component } from "react";
  import logo from "../../images/logo.png";
  import { Link } from "react-router-dom";
  import Scroll from "react-scroll";
  import "./NavBar.css";
  const ScrollLink = Scroll.Link;
  
  class NavBar extends Component {
    render() {
      return (
        &lt;div className="NavBar"&gt;
          &lt;Link to="/" className="logo-container"&gt;
            &lt;img className="logo" src={logo} alt="Mahboub logo"&gt;&lt;/img&gt;
          &lt;/Link&gt;
          &lt;div className="Nav-links"&gt;
  
            &lt;Link to="/"&gt;Home&lt;/Link&gt;
            &lt;ScrollLink
              className="navy"
              smooth={true}
              duration={500}
              to="projects"
            &gt;
              projects
            &lt;/ScrollLink&gt;
  
            &lt;Link to="/"&gt;Contacts&lt;/Link&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  export default NavBar;
  </code></pre>
  
  <p>here is the prjects component for project section  in home page   </p>
  
  <pre><code>function Projects() {
    return (
      &lt;div className="Home-Projects"&gt;
        &lt;Element id="projects"&gt;
          &lt;h1&gt;Projects&lt;/h1&gt;
        &lt;/Element&gt;
        &lt;div className="Projects-container"&gt;
          &lt;ProjectElement /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>