Question

我正在尝试设置“单页” react Web应用程序。我将单页词放在双引号之间，这正是我的意思。我的应用程序只有一页，所有组件都一个接一个地放置，因此，使您仅呈现应用程序的某些部分的通用react-router解决方案对我不起作用。目的是只有一页（尽可能大），并且用户可以通过菜单（或类似菜单）在页面的各个部分之间导航。另外，网站应该可以识别出有人输入 http://url.com/#section4 之类的网址，并自动滚动到请求的部分，将菜单上的选定部分标记为活动状态。另外，如果URL可以根据页面滚动而变化，那真是太棒了。如果有人知道一些库，组件等，或者我可以做到的方式，我将非常感激。谢谢你。

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一起使用，并允许有一个基础的锚导航，还可以自定义滚动功能（如果您可以放置offset或您想要的任何东西。像这样：

<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' })
  }

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

根据锚点进行网络导航

2 个答案: