Styling active Next js ссылки - PullRequest
Новая
       44

Styling active Next js ссылки

0 голосов
/ 12 апреля 2020

Я пытаюсь стилизовать active Далее js ссылки с useState, useEffect, useRouter и Styled Components.

Я прикрепил ссылки к своему github Но вот основная идея c. Сначала я поместил хук в компонент ALink, но потом подумал, что хук должен находиться в родительском компоненте, чтобы отслеживать изменения. это не совсем пробуждает.

Nav. js

const Nav = () => {
const router = useRouter();
const [homeActive, setHomeActive] = useState(false);
const [sellActive, setSellActive] = useState(false);

useEffect(() => {
  if (router.pathname === "/") setHomeActive(true);
  if (router.pathname === "/sell") setSellActive(true);
}, [ALink]);

return (
  <StyledNav>
    <ALink href="/" active={homeActive}>
      Home
    </ALink>
    <ALink href="sell" active={sellActive}>
      Sell
    </ALink>
    ...

ALink. js

const ALink = ({ children, active, href }) => {
  const [isHovered, setIsHovered] = useState(false);
  // const [active, setActive] = useState(false);

  return (
    <Link href={href}>
      <A
        active={active}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >
        {children}
        <LogoIconSrc active={active} show={isHovered} />
      </A>
    </Link>
  );
};

Код работает при начальной загрузке страницы, но кажется, он не замечает изменения страницы.

есть ли лучший способ сделать это?

Вот ссылки на страницы: Nav. js ALink. js

...