react 怎么实现同一个页面内锚点导航？

Question

我有个导航栏，然后点击不同的标题导航到文章的不同地方，添加了锚点和id，但是锚点跑到了URL后面，我用了react-router，导航栏和文章内容是两个组件，这个怎么实现？

Answer 1

以下代码可以实现：
scrollToAnchor (id){

document.getElementById(id).scrollIntoView();

}
render() {

return (
  <div className="page">
    <div className="anchorLink">
      <div className="navLink">
        <ul>
          <li>
            <a href="javascript:;" onClick={()=>this.scrollToAnchor('Summarize')}>Summarize</a>
          </li>
          <li>
            <a href="javascript:;" onClick={()=>this.scrollToAnchor('ProductFunction')}>ProductFunction</a>
          </li>
          <li>
            <a href="javascript:;" onClick={()=>this.scrollToAnchor('ToHelpAnswer')}>ToHelpAnswer</a>
          </li>
        </ul>
      </div>
    </div>
    <div id="Summarize"></div>
    <div id="ProductFunction"></div>
    <div id="ToHelpAnswer"></div>
  </div>
);

}

Answer 2

点开文章的时候就重写每个锚点的id啊，替换成路由地址加锚点值，id=location.hash+id;