为什么 gatsby 的 Link 组件的 activeClassName 对我的锚链接不起作用？

Question

因此，我正在尝试创建一个单页网站，并且我只希望导航链接在单击时滚动到锚链接。我想知道为什么当我单击这些锚链接时 activeClassName 不起作用。我注意到，单击锚链接时显示的活动链接是父链接。

我已经尝试对父链接使用 PartialActive={false} 但仍然没有任何反应。

这是我的代码：

<li>
  <Link className={headerStyles.navItem} activeClassName={headerStyles.navItemActive} to="/" partiallyActive={false}>
    Home
  </Link>
</li>

<li>
  <Link className={headerStyles.navItem} activeClassName={headerStyles.navItemActive} to="/#portfolio">Portfolio
  </Link>
</li>

我希望“投资组合”链接在单击时突出显示，但突出显示仍保留在“主页”链接上。url 也发生变化，但 activeClassName 不会从“Home”转移到“Portfolio”。这里可能发生了什么？activeClassName 不适用于锚链接吗？

Answer 1

正如Link文档中所解释的，您不能将哈希与 Gatsby 一起使用Link：

\n\n

\n

也<Link>不能navigate用于带有哈希或查询参数的路线导航。如果您需要这种行为，您应该使用锚标记或导入@reach/router包 \xe2\x80\x94，Gatsby 已经依赖于 \xe2\x80\x94 来利用其navigate功能...

\n

\n\n

另请注意，如果您partiallyActive在“/#portfolio”链接上设置为 true，则“/”链接将突出显示，因为“/#portfolio”也匹配“/”。

\n