I want to add a scroll-down effect to my "single page" web app using react or be it scroll library i.e when I click on navbar links it should scroll to a particular section.

This is my nav.js

      <div className="wrapper">
    <div className="left">
      <div className="navlinks">
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/portfolio">Portfolio</Link>
        <Link to="/contact">Contact</Link>
      </div>
    </div>

app.js

function App() {
const [menuOpen, setMenuOpen] = useState(false);
return (
<div className="app">
<Router>
<Switch>
<Route path="/contact">
<Contact />
</Route>
<Route path="/portfolio">
<Portfolio />
</Route>
<Route path="/about" component={About}/>
<Route exact path="/">
<Nav open={menuOpen} setOpen={setMenuOpen} />
<Home />
<Footer />
</Route>
</Switch>
</Router>
</div>

); }