时间戳

首页 > 解决方案 > 如何使用 React 创建页内链接？

javascript - 如何使用 React 创建页内链接？

问题描述

我想制作一个 React 网站并希望它使用页内链接。我知道在普通的 html 中你可以使用：

<a href='#someheader'>link</a>

<h1 id='someheader'>This is an example</h1>

不过，作为反应，我为网站的每个部分使用了多个单独的文件。因此，对于导航栏，我有一个文件，对于正文，我有一个文件等。我已经尝试了上述技术，但它似乎不起作用。

是因为链接和我希望链接转到的位置在不同的页面中，还是因为其他原因？

标签： javascripthtmlreactjs

解决方案

对于这条路线：

<Route path="/about" component={AboutPage} />

##链接到同一页面上的锚点

<!-- AboutPage.js -->
<a href='#someheader'>Jump to someheader</a>

转到someheader当前页面上的锚点（与React -Router 无关 - 这是简单的 HTML 行为）。一个元素文档

## 链接到另一个页面的锚点（棘手）

跳转到页面上的someheader点about。

此代码将起作用（但您没有获得“功能/功能” React-Router）：

<!-- HomePage.js -->
<!-- Simple href to anchor -->
<a href='about#someheader'>
  Go to about page and jump to someheader
</a>

但是当使用<Link>组件导航时 - 滚动到#hash 将不起作用/滚动。相关github问题：https ://github.com/ReactTraining/react-router/issues/394

<!-- HomePage.js -->
<!-- anchor not working -->
<Link to='about#someheader'>
  Go to About page without jumping to #someheader section
</Link >

如何解决这个问题（截至 9 月 20 日）？

  1. 使用这个包：https ://www.npmjs.com/package/react-router-hash-link
  2. 更多想法（相关/重复的stackoverflow Q）：在react-router 4中使用锚标签//如何将普通锚链接与react-router一起使用

推荐阅读