Underline on menu item when navigate

Question

I am using gatsby on react and have a nav menu with links, would like to when clicked on the link a border bottom show when in that current page, at the moment the border only appears with hover.

       <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 allows you to do that by using activeClassName or activeStyle property. Like this:

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

Then in your .scss:

.active{
  text-decoration: underline
} 

You can check for further information in Gatsby Link documentation. Gatsby, in fact, extends from React routing so, you have all their benefits plus some other features provided by Gatsby. For instance, you can set a partiallyActive={true} property in each <Link> which will match and set as "active" all paths under the route path. For example:

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

Will set as "active" all paths under /contacto (i.e: /contacto/give-me-five, /contacto/etc, and so on).