如何使用 React 创建页内链接？答案

【问题标题】：How do I make an inpage link with React?如何使用 React 创建页内链接？
【发布时间】：2020-12-21 18:17:47
【问题描述】：

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

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

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

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

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

【问题讨论】：

如果你已经使用 react-router，请查看medium.com/javascript-in-plain-english/…
如果您使用的是react-router，最好的解决方案是在单击Nav 时将ref 分配给我想要滚动到的部分，然后执行scrollIntoView .

【解决方案1】：

对于这条路线：

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

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

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

转到当前页面上的锚点someheader（不与 React-Router 相关 - 这是简单的 HTML 行为）。 a element docs

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

跳转到about页面上的someheader点。

此代码将起作用（但您没有获得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 日）？

【讨论】：

【解决方案2】：

查看 react-router 应该可以解决您的问题。

【讨论】：

不完全正确。您可以通过 react-router 将hash 添加到 URL（但是如果没有一些自定义代码，滚动到视图中将不起作用）。阅读本期：github.com/ReactTraining/react-router/issues/394
是的，你是对的。看错问题了。谢谢你提到这一点。我正在努力提高我的声誉，哈哈