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

Question

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

我试图创建一个链接：<a href="#anchor-tag" ></a>

当我点击它时，我希望滚动到 divid=anchor-tag

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

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

Answer 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>

或使用反应路由器：

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

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

希望这可以帮助！

Answer 2

上面的改进答案：

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

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

Answer 3

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

活生生的例子就在那里。它运行良好，代码很干净。