Gatsby Link 在 MDX 渲染页面上无法使用 isPartially Active

Question

我一直在用 gatsby 构建一个静态站点，并且我已经渲染了几个部分，这些页面编写为 MDX 并通过它们自己的布局进行解析。这都是通过 gatsby-plugin-mdx 文件实现的，而且效果很好。

但是，当用户导航到该部分中的子页面时，我试图让顶级导航突出显示为活动状态。我正在使用 Gatsby 文档中的代码，它适用于我作为普通 JS 文件创建的页面。

例子：

<Link partiallyActive={true} activeClassName="header-nav-active" to={menu.url} title={menu.title}>
  {menu.label}
</Link>

它似乎不适用于 MDX 页面，即使在 location.pathname 中呈现的内容是相同的。我目前的结构是：

src
-pages
--section
----section-subpage.js
--other section
----other-section-sub
-----index.mdx
----other-section-sub-2
-----index.mdx

最终，如果您查看此布局，我希望在您浏览该部分中的子页面时将“Figma”突出显示为活动状态。

Answer 1

您是否尝试过使用getProps helper function？因为 Gatsby 的路由器是从 React 的 (@reach/router) 扩展而来的，所以你可以利用高级的 props 来定制你的风格

您可以创建一个partiallyActive 链接，例如：

const isPartiallyActive = ({ isPartiallyCurrent }) => {
  return isPartiallyCurrent
    ? { className: 'navlink-active navlink' }
    : { className: 'navlink' }
}

const PartialNavLink = props => (
  <Link getProps={isPartiallyActive} {...props}>
    {props.children}
  </Link>
)

然后简单地使用：

 <PartialNavLink to="/figma">Figma</PartialNavLink>

或者以一种不精炼的方式：

<Link getProps={({ isPartiallyCurrent }) => isPartiallyCurrent ? { className: "active" } : null } to={"/figma"}>
Figma
</Link>