基于锚点反应Web导航

Question

我正在尝试设置“单页”反应Web应用程序。我把单页单词放在双引号之间，原因正是我的意思。我的应用程序只有一个页面，所有组件一个接一个地放置，因此，只允许渲染应用程序的某些部分的常见react-router解决方案对我不起作用。目的是只有一个页面（尽可能大），用户可以通过菜单（或类似）在它之间的部分之间导航。此外，当有人输入像http://url.com/#section4这样的网址时，网站应该会识别，并自动滚动到所请求的部分，将菜单上的选定部分标记为活动状态。而且，如果网址可以根据页面滚动而改变，那么就像一个很好的东西，会很棒。如果有人知道某些图书馆，组件等，或者我可以做到这一点，我会非常感激。提前致谢。

Answer 1

您应该使用react-router-dom包中的HashRouter，或者您可以使用同一个包中的NavLink，如下所示：

<NavLink>  
    to="/foo/#bar"  
    isActive={()=> window.location.pathname + window.location.hash === "/foo/#bar"}  
</NavLink>

Answer 2

好了，搜索后，我发现这个库https://www.npmjs.com/package/react-router-hash-link，它与React Router的BrowserRouter一起工作，并允许有一个基于锚的导航，并且还可以自定义滚动功能，你可以放置偏移或任何你想要的东西。像这样的东西：

<NavHashLink to="#anchor1" scroll={el => this.scroll(el)}>Anchor1</NavHashLink>

  scroll (el) {
    const offset = document.getElementById('element').offsetHeight
    window.scrollTo({ top: el.offsetTop - offset, left: 0, behavior: 'smooth' })
  }

希望可以帮助别人....