Next.js: スタイル付きコンポーネントとしてのリンク

Chromeでhref属性なしでaタグを使用すると、正確な問題が発生しました。 リンクとしてスタイル設定されておらず、通常のリンクのブラウザアクセシビリティ機能がありません。 うまくいったのは、 aタグに空のhrefを使用することでした。

これも体験します。

回避策については、空白ではなく、hrefをもう一度含めることをお勧めします。 ブラウザのURLプレビューの場合のみ。

タグを使用する代わりに、コンポーネントをstyledcomponentsに渡すことができます
https://github.com/styled-components/styled-components#third -party-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コンポーネントがこれをサポートできるようにプルリクエストを行うことも、styledcomponentsで動作する独自のバージョンのnextjsLinkComponentを作成することもできます。 リンクコードを見ないと、小道具がアンカー要素に渡されていないように聞こえます。

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>
)

AnotherComponent.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>
);

AnotherComponent.js

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

classNameがリンクの小道具として利用できない特別な理由はありますか？ それを追加するPRを作りたいのですが、それが許されないのには理由があるに違いないと思います。

答えが見つかりました！
https://github.com/zeit/next.js/pull/1642#issuecomment -292431043

スタイル付きコンポーネントを使用してリンクのスタイルを変更する方法

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この例では、アンカーをアンカー内にラップしています。 また、通常はリンクの配置が必要になる場合があります。 これは、スタイリングされた内部の問題として最初の問題をもたらします。