导航时在菜单项上加下划线

Question

我在 react 上使用 gatsby 并有一个带链接的导航菜单，希望在单击链接时在当前页面中显示边框底部，此时边框仅在悬停时出现。

       <ul className="men" id="menu">
            <li className="menuSob">
              <Link className="menuItem" to="/about/">
                sobre a magnet
              </Link>
             </li>
             <li className="menuRep">
              <Link className="menuItem" to="/representacoes/">
                representacoes
              </Link>
             </li>
             <li className="menuServ">
              <Link className="menuItem" to="/servicos/">
               servicos
              </Link>
             </li>
             <li className="menuContent">
              <Link className="menuItem" to="/conteudo/">
                conteudo
              </Link>
             </li>
             <li className="menuCont">
              <Link className="menuItem" to="/contato/">
                contato
              </Link>
             </li>
       </ul>

Answer 1

Gatsby Link 允许您通过使用activeClassName或activeStyle属性来做到这一点。像这样：

   <li className="menuSob">
     <Link className="menuItem" to="/about/" activeClassName={`active`}>
            sobre a magnet
     </Link>
   </li>

然后在您的.scss：

.active{
  text-decoration: underline
} 

您可以在Gatsby Link 文档 中查看更多信息。实际上，Gatsby 是从 React 路由扩展而来的，因此，您拥有它们的所有优点以及 Gatsby 提供的一些其他功能。例如，您可以partiallyActive={true}在每个属性中设置一个 属性，<Link>该属性将匹配路由路径下的所有路径并将其设置为“活动”。例如：

      <Link className="menuItem" to="/contato/" activeClassName={`active`} partiallyActive={true}>
        contato
      </Link>

将设置为“活动”下的所有路径/contacto（即：/contacto/give-me-five，，/contacto/etc等等）。