如何将盖茨比链接设置为标签<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>标记，而不是<Link>生成的<a>标记。在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标记处于活动状态时显示为活动状态。链接应该是a标记作为HTML标准。

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