时间戳

首页 > 解决方案 > 如何使用 react-router 在单页应用程序中单击按钮滚动到特定的 div？

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

问题描述

我在我的标题中有两个按钮（主页，联系我们），并且我在同一页面上的一个 div 中有“主页和联系我们”的内容，当我点击主页或联系按钮时，它应该使用React滚动到那个特定的 div -路由器 由于我对这些概念不熟悉，我找不到正确的解决方案。

标签： reactjsreact-spring

解决方案

你为什么要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

// 在 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>

推荐阅读