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

Question

非常类似于this angular question : 在使用 react-router 时如何使用 anchor 链接进行页内导航？

换句话说，如何在使用 react-router 时实现以下纯 HTML？

<a href="#faq-1">Question 1</a>
<a href="#faq-2">Question 2</a>
<a href="#faq-3">Question 3</a>

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="fa1-3">Question 3</h3>

目前我拦截对此类链接的点击，并滚动到 anchor 位置。这并不令人满意，因为这意味着无法直接链接到页面的某些部分。

Answer 1

anchor 链接的问题是react-router默认是使用URL中的hash来维护状态。幸运的是，您可以根据 Location documentation 将默认行为换成其他行为。 .在您的情况下，您可能想使用 HistoryLocation 对象尝试“干净的 URL”，这意味着 react-router 不会使用 URL 哈希。像这样尝试一下:

Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, document.body);
});