如何使用react-router滚动到单页应用程序中单击按钮时的特定div？

Question

我的标题中有两个按钮（首页，联系我们），而iam的div在同一页面的div中具有“首页和联系我们”的内容，同时点击首页或联系按钮时，它应该滚动到该特定页面div使用反应路由器 由于对这些概念还不熟悉，所以我找不到正确的解决方案。

Answer 1

为什么要React-Router？

不能直接将按钮包装到<a>标记中，并在要滚动的部分的href处为<a>标签提供id属性。< / p>

例如

<a href="#home"><button>Home</button></a>

组件中的某处

<div id="home">
...
</div>

为获得平滑的滚动效果，您可以添加此CSS，

html{scroll-behavior:smooth}

已更新

根据评论，您可以使用react-router-hash-link。

yarn add react-router-hash-link
or
npm install --save react-router-hash-link

//在YourComponent.js中

...
import { HashLink as Link } from 'react-router-hash-link';
...

//就像RRv4一样使用它（可以是字符串或对象，有关详细信息，请参见RRv4 api）：

<Link to="/some/path#with-hash-fragment">Link to Hash Fragment</Link>