如何在 react-router 中创建锚标签？答案

【问题标题】：How to create Anchor Tag in react-router?如何在 react-router 中创建锚标签？
【发布时间】：2017-01-19 10:45:48
【问题描述】：

我在内部使用带有 react-router 的 react-boilerplate (3.4.0) 进行路由。

我尝试创建一个链接：

当我点击它时，我希望滚动到带有 id=anchor-tag 的 div

它只是滚动到页面顶部，即使我使用 Link 组件而不是标签。我们是否必须关心使用或？

我们应该如何在 react-router 中创建锚标签？

【问题讨论】：

标签： react-router anchor react-boilerplate

【解决方案1】：

这可能会晚一些，但您可以将其添加到您的组件中：

import ReactDOM from 'react-dom';

... some more codez...

componentDidUpdate() {
  const anchor = this.props.location.hash.replace('#', '');

  if (anchor) {
    const domElement = ReactDOM.findDOMNode(this.refs[hash]);
    if (domElement) {
      domElement.scrollIntoView();
    }
  }
}

然后在您要导航到的实际元素上，您需要添加ref 属性，如下所示：

<h1 ref="my-anchor">Hello World</h1>

链接元素看起来就像一个普通的链接：

<a href="/about#my-anchor>Go To Anchor</a>

或者使用 react-router：

<Link key="my-anchor" to="/about#my-anchor">Go To Anchor</Link>

这适用于 react-router 2.6.1 - 目前不确定更高版本。

希望这会有所帮助！

【讨论】：

谢谢，它会有所帮助，我会尝试并尽快告诉你它是否对我有用。

【解决方案2】：

上面的改进答案：

componentDidMount() {
  const anchor = this.props.location.hash;

  if (anchor) {
    const domElement = document.querySelector(anchor);
    if (domElement) {
      domElement.scrollIntoView();
    }
  }
}

【讨论】：

【解决方案3】：

我强烈建议使用来自Rafael Pedicini 的名为react-router-hash-link 的包。

实时示例正确there。它运行良好，代码干净。

【讨论】：