【问题标题】:Can HTML anchor tags ever be used for internal links in Gatsby?HTML 锚标记可以用于 Gatsby 中的内部链接吗?
【发布时间】:2021-03-12 15:28:20
【问题描述】:

我正在开发一个网站,其中搜索框可以在下拉列表中返回大量结果,并且每个结果都有一个指向同一网站内网页的可点击内部链接。

我最初遵循Gatsby's advice 并将这些实现为<Link> 元素,.但是,在执行新搜索后不久在搜索结果中滚动时,这似乎会导致问题 - 滚动条会自动跳回顶部 3 或 4 次,然后再稳定下来。只有在清除浏览器缓存后才能对相同的搜索重复此操作,这让我怀疑它与 Gatsby 的页面预加载有某种关系。

如果链接改为 HTML <a> 标签,问题就会消失......但我担心这违背了盖茨比的建议,可能还有其他我不知道的问题(避风港'到目前为止还没有看到任何东西...)

谁能建议在这些情况下是否建议对内部链接使用锚标记?

【问题讨论】:

    标签: reactjs hyperlink gatsby anchor preloading


    【解决方案1】:

    当然,您始终可以使用标准的<a> 标签进行内部路由,但是,您将超出 React 的范围(@reach/router 的范围)。在您的情况下,由于您没有创建内部导航 per se (意味着通过内部页面导航)我认为您的解决方法是最轻量级和最原生的方法,而不添加额外的依赖项,这会增加包大小,具有可以本地处理的功能。

    正如你所说,<Link> 组件被编译成一个 <a> 标签,最后带有一些 React 的维生素,所以对我来说,这是最好的方法。

    【讨论】:

      猜你喜欢
      • 2016-10-30
      • 1970-01-01
      • 1970-01-01
      • 2011-10-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多