使用反应滚动浏览部分[重复]

Posted 2023-02-22

【中文标题】使用反应滚动浏览部分[重复]

【英文标题】：Scroll through section using react [duplicate]

【发布时间】：2021-11-23 17:58:37

【问题描述】：

我想使用 react 或滚动库向我的“单页”网络应用程序添加向下滚动效果，即当我点击导航栏链接时，它应该滚动到特定部分。

这是我的 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>

);

【问题讨论】：

在这种情况下你不应该使用 React 路由器！

这能回答你的问题吗？ How to scroll to an element?

【参考方案1】：

你可以看看这个问题How to scroll to an element?

使用 Ref，正如 Digamber 所说，在这种情况下您不应该使用 Router。