Next.js: Ссылка как стилизованный компонент

У меня была точная проблема при использовании тега a без атрибута href в Chrome. Она не оформлена как ссылка и не имеет функций доступности для браузеров, характерных для обычной ссылки. Что сработало, так это использование пустого href в теге a .

Испытывать и это.

В качестве обходного пути, вероятно, лучше включить href во второй раз, чем оставлять его пустым. Если только для предварительного просмотра URL-адреса браузера.

Вы можете передать компонент в styledcomponents вместо использования тега
https://github.com/styled-components/styled-components#сторонних компонентов

import Link from 'next/link'
const StyledLink = styled(Link)`
  color: red;
  background: blue;
`

Используй это

export default () => (<div><StyledLink href="mylink">MyText</StyledLink></div>)

Спасибо @kennylavender , попробую!

@sedubois это сработало? Вы не можете передать className в ссылку, поэтому я не думаю, что это сработает

@luisrudge еще не пробовал, прямо сейчас обходной путь был достаточно хорош, и я попробую еще раз, чтобы посмотреть, смогу ли я напрямую использовать styled-jsx...

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

@sedubois Я могу подтвердить, что решение @kennylavender не работает. Я бы рекомендовал вновь открыть этот вопрос.

Можно сделать запрос на вытягивание, чтобы позволить компоненту nextjs Link поддерживать это, или вы можете создать свою собственную версию компонента nextjs Link, которая работает с styledcomponents. Не глядя на код ссылки, кажется, что он не передает никаких реквизитов якорному элементу.

Вы можете создать свой собственный, импортировав маршрутизатор nextjs , а затем разрешить styledcomponents стилизовать компонент https://www.styled-components.com/docs/basics#styling -any-components.

Вот быстрый пример, я только написал этот код здесь напрямую и не тестировал его, поэтому просто используйте его только в качестве примера.

// my-app-link.js
import React from 'react'
import PropTypes from 'prop-types' // Import this from react if your using an older version.
import Router from 'next/router'

const handler = (href) => Router.push(href);

const Link = ({className, children, href, ...rest}={}) => (
  <a onClick={() => handler(href)} className={className} {...rest} >{children}</a>
);

Link.propTypes = {
  className: PropTypes.string,
  href: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.string,
  ]),
  children: PropTypes.node,
}

export default Link;

Хороший подход @kennylavender, но я не думаю, что он достаточно хорош, потому что вы не отображаете атрибут href (вместо этого вы используете событие onClick ). Итак... Насколько хорош этот подход для SEO? Другие альтернативы?

Это просто пример, вы должны взять его дальше. Вы можете и определенно должны добавить атрибут href поверх кода, который я разместил. Взгляните на то, как реализован nextjs/link, чтобы получить представление о том, как это сделать.

Привет ребят. В версии 3.0.1-beta.13+ вы можете установить для passHref значение Link (как логическое свойство), чтобы открыть его href для styled-components (или любой другой библиотеки, которая обертывает его тег <a/> ).

Используя первый пример задачи: это можно сделать так:

const StyledLink = styled.a`
  color: red;
  background: blue;
`

export default ({ href, name }) => (
  <Link prefetch href={href} passHref>
    <StyledLink>{name}</StyledLink>
  </Link>
)

К вашему сведению: если вы используете next-routes , это будет выглядеть так:

export default ({route, params, children}) => (
  <Link route={route} params={params} passHref>
    <StyledLink>{children}</StyledLink>
  </Link>
)

Улучшенное решение @vjpr , обходя реквизит className напрямую с нашим Link , чтобы мы могли расширить их стили в правильной области:

Link.js

export default ({ route, params, children, className }) => (
  <Link route={route} params={params} passHref>
    <StyledLink className={className}>{children}</StyledLink>
  </Link>
)

ДругойКомпонент.js

import Link fron 'components/Link';

const RedLink = styled(Link)`
  background-color: red;
`

Немного улучшенная версия @torresandres , стилизующая ссылку внутри компонента, поэтому нам не нужно создавать стилизованный компонент в каждом компоненте, в который мы импортируем Link .

Link.js

const StyledLink = styled.a`
  //styles
`
export default ({ route, params, href, children, className }) => (
  <Link route={route} params={params} href={href} passHref>
    <StyledLink className={className}>{children}</StyledLink>
  </Link>
);

ДругойКомпонент.js

<Link href="/">Login</Link>

Есть ли какая-то конкретная причина, по которой className недоступен в качестве реквизита для Link? Я хотел бы сделать PR, чтобы добавить это, но я полагаю, что должна быть причина, по которой это не разрешено.

Нашел ответ!
https://github.com/zeit/next.js/pull/1642#issuecomment-292431043

для людей, как хотят изменить стиль ссылки с помощью styled-components

const LinkItem = styled(Link)`
// your style
`;

тогда вы можете использовать вот так <LinkItem to="/yourComponent">somthing</LinkItem>

Мне потребовалось некоторое время, чтобы понять это, поэтому я напишу TLDR 👇

TLDR Добавьте passHref в свой тег <Link> и включите в него нужные стилизованные компоненты.

Практический пример
В родительском компоненте:

<Link href="/login" passHref>
          <TopbarLink>Login</TopbarLink>
</Link>

В файле стилизованного компонента, который определяет TopbarLink:

export const TopbarLink = styled.a`
// your style
`;

@ferrucc-io В вашем примере якорь заключен в якорь. А также обычно вам может понадобиться позиционирование ссылки. Что вызывает первоначальную проблему как внутреннюю, которая стилизована.