Bom dia! Prazer,
O que o professor passou foi: MenuLink.js
export default function MenuLink( {children, to} ) {
const localizacao = useLocation();
return (
<Link className={`${styles.link} ${localizacao.pathname === to ? styles.linkDestacado : ""}`} to={to}>{children}</Link>
)
}Menu.js
export default function Menu() {
return (
<header>
<nav className={styles.navegacao}>
<MenuLink to="/">Início</MenuLink>
<MenuLink to="/sobremim">Sobre Mim</MenuLink>
</nav>
</header>
)
}1ª Pergunta: No Menu.js não seria melhor ocultar o "Início" e passar uma propriedade para colocarmos na própria tag? Eu tentei e funcionou mas o estilo de underline não funcionou 2ª Pergunta: No código do MenuLink.jss:
<Link className={`${styles.link} ${localizacao.pathname === to ? styles.linkDestacado : ""}`} to={to}>{children}</Link>Por que não colocamos "=== {to}"? Apenas "to"? E também, por que "{children}"? Sendo que não estamos passando nada no Menu.js
