reactjs - 如何将 Gatsby Link 设置为 标签而不是 标签？

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 Prop 告诉router-link元素，它应该将元素呈现为列表项。这样，事件类将应用于列表项而不是子项 <a>标签。如何使用 Gatsby Link 获得相同的结果？我似乎无法在任何地方找到答案。谢谢。

Answer 1

您不想使用 li 代替 a 标签。您只希望 li 在相应的 a 标记处于事件状态时显示为事件状态。作为 HTML 标准，链接应该是 a 标签。

Gatsby 使用 reach-router 进行路由，因此在处理路径和路由时，可以使用 globalHistory 对象来获取当前路径:

import { globalHistory } from '@reach/router'

然后在你的组件中，获取当前路径的pathname:

const pathname = globalHistory.location.pathname

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

<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>
)