HTML 锚标记是否可以用于 Gatsby 中的内部链接?
Can HTML anchor tags ever be used for internal links in Gatsby?
我正在开发一个网站,其中的搜索框可以 return 下拉列表中的很多结果,并且每个结果都有一个可点击的内部 link 到同一站点内的网页。
我最初遵循 Gatsby's advice 并将它们实现为 <Link>
元素,.但是,在执行新搜索后不久滚动搜索结果时,这似乎会导致问题 - 滚动条自动跳回顶部 3 或 4 次,然后才稳定下来。只有在清除浏览器缓存后,这对于相同的搜索才可重复,这让我怀疑它与 Gatsby 的页面预加载有某种关系。
如果 link 改为 HTML <a>
标签,问题就会消失...但我担心这违背了 Gatsby 的建议,可能会有是我还不知道的其他问题(到目前为止还没有看到任何东西......)
谁能告诉我在这些情况下对内部 link 使用锚标记是否可取?
当然,您始终可以使用标准的 <a>
标记进行内部路由,但是,您将超出 React 的范围(@reach/router
的范围)。在你的情况下,因为你没有创建内部导航 本身 (意味着通过内部页面导航)我认为你的解决方法是最轻量级和最原生的方法,没有添加额外的依赖关系,这会增加包大小,具有可以本地处理的功能。
正如你所说,<Link>
组件被编译成一个 <a>
标签,最后带有一些 React 的维生素,所以对我来说,这是最好的方法。
Gatsby <Link>
使用 Tailwind 元素时出现问题 offCanvas
我在 offCanvas 组件中使用 Gatsby <Link>
时遇到了类似的问题,导致页面滚动在所有设备上完全冻结,直到导航离开。使用与触发方式冲突的事件来猜测元素。
替换组件内转到内部页面的所有 <Link>
标签可以解决问题。参考'Ferren'的回答,最终将带有to
属性的标签编译成带有href
的标签。
<div className={'offcanvas'} id={id} aria-labelledby={`#${id}Label`} tabIndex={-1}>
<div className={'offcanvas-header'}>
<a href={'/about'} className={'offcanvas-title'} id={'#offfcanvasLabel'}>
About Us
</a>
<button type={'button'} data-bs-dismiss={'offcanvas'} aria-label={'Close'} tabIndex={-1}></button>
</div>
...
我正在开发一个网站,其中的搜索框可以 return 下拉列表中的很多结果,并且每个结果都有一个可点击的内部 link 到同一站点内的网页。
我最初遵循 Gatsby's advice 并将它们实现为 <Link>
元素,.但是,在执行新搜索后不久滚动搜索结果时,这似乎会导致问题 - 滚动条自动跳回顶部 3 或 4 次,然后才稳定下来。只有在清除浏览器缓存后,这对于相同的搜索才可重复,这让我怀疑它与 Gatsby 的页面预加载有某种关系。
如果 link 改为 HTML <a>
标签,问题就会消失...但我担心这违背了 Gatsby 的建议,可能会有是我还不知道的其他问题(到目前为止还没有看到任何东西......)
谁能告诉我在这些情况下对内部 link 使用锚标记是否可取?
当然,您始终可以使用标准的 <a>
标记进行内部路由,但是,您将超出 React 的范围(@reach/router
的范围)。在你的情况下,因为你没有创建内部导航 本身 (意味着通过内部页面导航)我认为你的解决方法是最轻量级和最原生的方法,没有添加额外的依赖关系,这会增加包大小,具有可以本地处理的功能。
正如你所说,<Link>
组件被编译成一个 <a>
标签,最后带有一些 React 的维生素,所以对我来说,这是最好的方法。
Gatsby <Link>
使用 Tailwind 元素时出现问题 offCanvas
我在 offCanvas 组件中使用 Gatsby <Link>
时遇到了类似的问题,导致页面滚动在所有设备上完全冻结,直到导航离开。使用与触发方式冲突的事件来猜测元素。
替换组件内转到内部页面的所有 <Link>
标签可以解决问题。参考'Ferren'的回答,最终将带有to
属性的标签编译成带有href
的标签。
<div className={'offcanvas'} id={id} aria-labelledby={`#${id}Label`} tabIndex={-1}>
<div className={'offcanvas-header'}>
<a href={'/about'} className={'offcanvas-title'} id={'#offfcanvasLabel'}>
About Us
</a>
<button type={'button'} data-bs-dismiss={'offcanvas'} aria-label={'Close'} tabIndex={-1}></button>
</div>
...