时间戳

首页 > 解决方案 > Gatsby 中的活动链接似乎被斜杠破坏了

javascript - Gatsby 中的活动链接似乎被斜杠破坏了

问题描述

当我在正确的页面上时，我想突出显示我的项目，所以我使用了这个代码：

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

标签： javascriptreactjsgatsby

解决方案

Gatsby v2 消除了对该功能的需求。

代码库和示例都撒了函数版本，但更好的方法是使用partiallyActive和activeStyle道具。

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


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

推荐阅读