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

Question

我的标题中有两个按钮(主页，联系我们)，并且我在同一页面上的div中具有"主页和联系我们"的内容，而我单击主页或联系按钮时，它应该使用React-Router滚动到该特定div由于我是这些概念的新手，我找不到正确的解决方案。

Answer 1

为什么要为此React-Router？

您不能直接将按钮包装到<a>标签中，并提供一个href属性来<a>具有要滚动的部分id的标签。

例如

<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

在您的组件中.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>