Блог

Главная - Вопросы по программированию - Как сделать активные ссылки в Следующем.JS с использованием стилизованных компонентов

Как сделать активные ссылки в Следующем.JS с использованием стилизованных компонентов

#reactjs #next.js #styled-components

Вопрос:

Я делал простую навигационную панель в побочном проекте и столкнулся с проблемой с активными ссылками в Next.JS, в react вы можете просто использовать react-router-dom, который имеет компонент связи с атрибутом activeclass, но не в Next.JS (Я думаю)

Ответ №1:

Чтобы это сработало, я использовал UseRouter UseState крючки

 const router = useRouter();
const [pathName, setPathName] = useState(router.pathname);

router.pathname получает все /[route] , что в данный момент находится на вашем URL-адресе.

 const newPathName = () => {
    setPathName(router.pathname);
  };

<Link href="/" passHref>
       <StyledLink onClick={newPathName} pathname={pathName}>
         Home
       </StyledLink>
</Link>

И, используя его в качестве функции onClick, он устанавливает состояние использования для нового маршрута

StyledLink будет стилизованным компонентом, который будет менять цвета при нажатии

 export const StyledLink = styled.a`
  color: ${(props) => (props.href === props.pathname ? "#a37600" : "#eaaa00")};
  text-decoration: none;
  padding-top: 20px;
  font-size: 1.3rem;
  :hover {
    text-decoration: underline;
    color: #a37600;
  }
`;

Я в основном сделал этот ответ, потому что искал об этом около 30 минут или около того и не нашел ничего простого и на самом деле достаточно быстрого для навигационной панели, если был аналогичный или более простой ответ, пожалуйста, свяжите его со мной.

Комментарии:

1. Я обнаружил, что мне нужно дважды щелкнуть, чтобы изменить цвет. Вы тоже нашли это?

Ответ №2:

Вы можете реализовать это, просто используя useRouter без использования useState (поскольку setState это асинхронно, вы бы предпочли использовать что-то, что не зависит от этого).

   import { useRouter } from 'next/router';
  ...
  const router = useRouter();

Тогда ваши Link компоненты будут выглядеть следующим образом:

 <Link href="/" passHref>
  <LinkText pathName={router.pathname}>Home</LinkText>
</Link>

Наконец, ваш внутренний компонент (в моем случае, это LinkText ) будет иметь эту строку:

 export const LinkText = styled.a`
  color: ${(props) => (props.href === props.pathName ? #728c69 : #fff)};
`;
Метки: