为什么 gatsby 的 Link 组件的 activeClassName 不适用于我的锚链接？答案

【问题标题】：Why is activeClassName of gatsby's Link component not working for my anchor links?为什么 gatsby 的 Link 组件的 activeClassName 不适用于我的锚链接？
【发布时间】：2020-01-27 01:26:19
【问题描述】：

所以我正在尝试创建一个单页网站，我只希望导航链接在单击时滚动到锚链接。我想知道为什么当我单击这些锚链接时 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 对锚链接不起作用吗？

【问题讨论】：

你不应该使用链接组件作为锚点，使用普通的锚点标签。
我有同样的问题，我没有使用哈希链接。

标签： hyperlink gatsby

【解决方案1】：

正如Link docs 中所述，您不能将哈希与盖茨比的Link 一起使用：

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

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

【讨论】：