0

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>

); }

Digamber negi
  • 407
  • 1
  • 7
  • 20

1 Answers1

0

You can take a look at this question How to scroll to an element?

Using Ref, as Digamber said you should not use Router in this case.

Steffano Festa
  • 56
  • 1
  • 9