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

Question

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

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

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

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

是因为链接和我要链接去的地方在不同的页面，还是因为别的？

Answer 1

对于这条路线:

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

## 链接到同一页面上的 anchor

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

转到 anchor someheader在当前页面上(不与 React-Router 相关 - 这是简单的 HTML 行为)。 a element docs

## 链接到另一个页面上的 anchor (棘手)

跳转到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):Using anchor tags in react-router 4//How to use normal anchor links with react-router