如何将 Gatsby Link 设置为 <li> 标签而不是 <a> 标签？

Question

我正在构建一个 Gatsby 站点，并且该网站的菜单具有以下 HTML 结构：

<li className="menu-item current-menu-item">
  <Link to="/">Home</Link>
</li>
<li className="menu-item">
  <Link to="/contact">Contact</Link>
</li>

如您所见，活动类应用于<li>标签，而不是由<a>生成的标签<Link>。在 Vue 中，我们可以这样做：

<router-link to="/contact" tag="li">
  <a href="javascript:void">Contact</a>
</router-link>

该tag道具告诉router-link它应该呈现的元素列表项元素。这样，活动类将应用于列表项而不是子<a>标签。如何使用 Gatsby Link 实现相同的结果？我似乎无法在任何地方找到答案。谢谢你。

Answer 1

你不想使用li ，而不是一个的a标签。您只想li在相应的a标签处于活动状态时显示为活动状态。链接应该是aHTML 标准的标签。

Gatsbyreach-router用于路由，因此在处理路径和路由时，可以使用该globalHistory对象获取当前路径：

import { globalHistory } from '@reach/router'

然后在您的组件中，获取pathname当前路径的 ：

const pathname = globalHistory.location.pathname

现在您要做的就是li根据 的值有条件地设置 each 的样式pathname：

<li className={`menu-item ${pathname === "/" ? "current-menu-item" : ""} `}>
  <Link to="/">Home</Link>
</li>
<li className={`menu-item ${pathname === "/contact" ? "current-menu-item" : ""} `}>
  <Link to="/contact">Contact</Link>
</li>

拥有一系列链接可能更容易：

const navLinks = [
  { label: 'Home', to: '/' },
  { label: 'Contact', to: '/contact' },
  { label: 'About', to: '/about' },
]

然后在 return 语句中映射它们而不是单独写出它们：

return (
  <ul>
    {navLinks.map(link => (
      <li className={`menu-item ${pathname === link.to ? 'current-menu-item' : ''} `}>
        <Link to={link.to}>{link.label}</Link>
      </li>
    ))}
  </ul>
)