Gatsby中的活动链接似乎被斜杠打断了

Question

我想在右侧页面上突出显示我的项目，所以我正在使用以下代码：

const isActive = ({ isCurrent }) => {
  return isCurrent ? { className: "active" } : null
}
<Link getProps={isActive} to="/post">Articles</Link>

它适用于/post，但不适用于/post/

请问如何解决这两种情况？

---

我正在使用：

gatsby-link：https://www.npmjs.com/package/gatsby-link

其中使用：https://reach.tech/router/example/active-links

Answer 1

好吧，所以有一个插件https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-remove-trailing-slashes，它将删除URL中的尾部斜杠，我相信这是正确的解决方案。

如果由于某种原因您不想安装此依赖项，则可以自定义isActive函数，获取href参数，然后与window.location.pathname比较（首先从最后一个），但也可以，但是我强烈建议您使用第一个解决方案。

Answer 2

Gatsby v2不再需要该功能。

该代码库和示例均附有函数版本，但更好的方法是使用partiallyActive和activeStyle道具。

    <Link
      to="/post"
      partiallyActive={true}
      activeStyle={styles.active}
    >
      Articles
    </Link>

  const styles = {
    active: {
      borderBottomColor: `#663399`,
      color: `#663399`,
    }
  }