时间戳

首页 > 解决方案 > 突出显示 React/Gatsby 中的活动页面链接

css - 突出显示 React/Gatsby 中的活动页面链接

问题描述

这里不使用 React Router，希望保持简单。我正在使用 Gatsby，activeClassName它的系统有一个属性<Link>，但是，我认为它不起作用，因为我在主导航上使用它，然后我有一个带有类别的子导航。

我为 subnav 提出的解决方案是一个小功能，可以查看您是否在目录中：

  const activeStyle = {
    color: "green",
    background: "red",
  }
  function pathIncludes(word) {
    return window.location.href.includes(word) ? { activeStyle } : ""
  }

然后在我的 return() 中：

<ul>
    <li styles={pathIncludes('motion')}>
        <Link to="./motion">Motion</Link>
    </li>
    <li styles={pathIncludes('design')}>
        <Link to="./design">Design</Link>
    </li>
    <li styles={pathIncludes('illustration')}>
        <Link to="./illustration">Illustration</Link>
    </li>
</ul>

它几乎可以工作，呈现在我得到的页面上<li class="[object Object]">

我怎样才能将它传递给 jsx？

或者，有没有更好的方法来做到这一点，而不涉及安装额外的依赖项？

标签： cssreactjshyperlinkgatsby

解决方案

我尝试了接受的回复，它适用于具有路径尾部的 URL (example.com/ about )，但不适用于主页 (example.com/)。

我潜伏了一下，发现了更优雅的解决方案，它利用了本地 Gatsby 的 <Link> getProps道具（阅读@reach/routes 文档了解更多信息）。

因此，如果我们在您的示例中添加一个主页（即使没有，它似乎仍然是设置活动链接样式更合适的方式），解决方案将如下所示：

function isActive( {isCurrent} ) {
    return isCurrent ? {className: "active"} : null
}

<ul>
  <li>
    <Link to="/" getProps={isActive}>Home</Link>
  </li>
  <li>
    <Link to="/design" getProps={isActive}>Design</Link>
  </li>
  <li>
    <Link to="/illustration" getProps={isActive}>Illustration</Link>
  </li>
</ul>

推荐阅读