将锚点与 react-router 一起使用

Question

我如何使用 react-router，并让链接导航到特定页面上的特定位置？ （例如 /home-page#section-three ）

详情：

我在我的 React 应用程序中使用 react-router 。

我有一个站点范围的导航栏，需要链接到页面的特定部分，例如 /home-page#section-three 。

所以即使你在说 /blog ，点击这个链接仍然会加载主页，第三部分滚动到视图中。这正是标准 <a href="/home-page#section-three> 的工作方式。

注意：react-router 的创建者没有给出明确的答案。他们说正在进行中，同时使用其他人的答案。我会尽我最大的努力让这个问题随着进展和可能的解决方案而更新，直到出现一个主要的问题。

研究：

---

如何在 react-router 中使用普通锚链接

这个问题是从 2015 年开始的（所以 10 年前的反应时间）。投票最多的答案是使用 HistoryLocation 而不是 HashLocation 。基本上，这意味着将位置存储在窗口历史记录中，而不是哈希片段中。

坏消息是……即使使用 HistoryLocation（大多数教程和文档在 2016 年说要做的），锚标签仍然不起作用。

---

https://github.com/ReactTraining/react-router/issues/394

ReactTraining 上关于如何使用锚链接与 react-router 的线程。这是没有确定的答案。要小心，因为大多数建议的答案都已过时（例如，在 <Link> 中使用“哈希”道具）

---

原文由 Don P 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

React Router Hash Link 为我工作并且易于安装和实施：

 $ npm install --save react-router-hash-link

在您的 component.js 中将其导入为链接：

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

而不是使用锚点 <a> ，使用 <Link> ：

 <Link to="home-page#section-three">Section three</Link>

_注意_：我使用了 HashRouter 而不是 Router ：

原文由 maledr53 发布，翻译遵循 CC BY-SA 4.0 许可协议