如何通过Gatsby和Reactstrap将NavItem设置为锚标签有效？

Question

我在使用Reactstrap的Gatsby网站中有一个导航栏菜单，其中包含几个菜单项。菜单项设置为指向该页面内的定位标记（例如#anchor1）。

<Nav navbar>
    <NavItem>
        <Link to="#anchor1" activeClassName="active" className="nav-link">Anchor 1</Link>
    </NavItem>
    <NavItem>
        <Link to="#anchor2" activeClassName="active" className="nav-link">Anchor 2</Link>
    </NavItem>
</Nav>

虽然链接可以正常工作，但菜单项不会显示为活动状态：active类未添加到NavItem。当用户导航到菜单项时，如何使其突出显示？

Answer 1

来自Gatsby Link documentation：

<Link>和导航都不能用于带有哈希或查询参数。如果您需要这种行为，您应该使用定位标记或导入@reach/router包-Gatsby已经取决于-要利用其导航功能

由于这种不兼容，我想您的错误来自那里。

但是，您可以在单击链接时尝试使用state并使用此状态设置类名称：

<Link
  to={`/photos/${id}`}
  state={{ fromFeed: true }}
>

最后一种肯定可以使用的解决方案是使用常规的<a>，并将您的哈希作为文档要点。