基于锚点的反应网络导航

Question

我正在尝试设置一个单页 React 网络应用程序。我的应用程序只有一个页面，所有组件都一个接一个地放置，因此，让您只呈现应用程序的一部分的常见 react-router 解决方案对我不起作用。

目的是只有一个页面（尽可能大），用户可以通过菜单（或类似菜单）在页面上的各个部分之间导航。此外，当有人键入 http://url.com/#section4 之类的 URL 时，网站应该能够识别，并自动滚动到请求的部分，将菜单上的所选部分标记为活动。

此外，很高兴拥有，如果 URL 可以根据页面滚动而改变，那就太棒了。

我怎样才能做到这一点？

Answer 1

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

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

Answer 2

我发现 this library 与 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' })
  }

基于锚点的反应网络导航

React web navigation based on anchors

anchor

scroll

single-page-application

reactjs

react-router