Oi, Carlos, tudo bem?
Sim, é possível escrever código JavaScript mais independente para definir o nome de uma classe. Vou considerar como exemplo o componente que você enviou:
<Link className={`
${styles.link}
${localizacao.pathname === to ? styles.linkAtivo : ""}
`} to={to}>
{children}
</Link>
Quando estamos no JSX, não conseguimos utilizar estruturas do JS como if e for, mas conseguimos utilizar expressões e operadores, por isso no React é tão comum o uso de operadores ternários e a função map de arrays.
Mas para conseguir utilizar estruturas mais complexas do JS, em vez de escrever localizacao.pathname === to ? styles.linkAtivo : "" diretamente para a classe, você pode criar uma função no mesmo arquivo que realiza essa verificação. Dentro do componente MenuLink, crie uma função como a seguir:
function defineEstilo(destinoDoLink) {
return localizacao.pathname === destinoDoLink ? styles.linkAtivo : "";
}
E agora o código do componente Link fica assim:
<Link className={`
${styles.link}
${defineEstilo(to)}
`} to={to}>
{children}
</Link>
Note que precisamos passar o parâmetro to para a função defineEstilo para que a função consiga retornar o valor correto. Agora, com uma função separada, você pode escrever lógicas mais complexas e outras estruturas do JS.
No entanto, é sempre importante você refletir a necessidade criar funções JS separadas. Se utilizar o JS diretamente nos componentes for uma forma mais simples e produtiva de alcançar o mesmo resultado, pode ser interessante manter essa solução.
Por outro lado, criar funções JS separadas pode trazer algumas vantagens em determinadas situações, como reaproveitamento de código.
Espero ter ajudado! Abraços e bons estudos :)
