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

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

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

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