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

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属性(property)。像这样:

   <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 提供的一些其他功能。例如，您可以设置 partiallyActive={true}每个属性<Link>它将匹配路由路径下的所有路径并将其设置为“事件”。例如:

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

将 /contacto 下的所有路径设置为“事件” (即: /contacto/give-me-five 、 /contacto/etc 等)。