Next.js: Tautan sebagai komponen gaya

Saya memiliki masalah yang tepat saat menggunakan tag a tanpa atribut href di Chrome. Itu tidak ditata sebagai tautan dan tidak memiliki fitur aksesibilitas browser dari tautan biasa. Apa yang berhasil adalah menggunakan href kosong pada tag a .

Mengalami ini juga.

Untuk solusinya Mungkin ide yang lebih baik untuk memasukkan href untuk kedua kalinya daripada kosong. Jika hanya untuk preview url browser.

Anda dapat meneruskan komponen ke komponen gaya alih-alih menggunakan tag
https://github.com/styled-components/styled-components#third-party-components

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

Gunakan

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

Terima kasih @kennylavender , akan mencobanya!

@sedubois apakah itu berhasil? Anda tidak dapat meneruskan className ke Tautan, jadi menurut saya itu tidak akan berhasil

@luisrudge belum mencoba, saat ini solusinya cukup baik dan saya akan mencoba sekali lagi untuk melihat apakah saya dapat menggunakan styled-jsx secara langsung...

Jika Anda mengonfirmasi itu tidak berhasil, beri tahu saya dan dapat membuka kembali ini.

@sedubois Saya dapat mengonfirmasi bahwa solusi @kennylavender tidak berfungsi. Saya akan merekomendasikan membuka kembali masalah ini.

Permintaan Tarik dapat dibuat untuk memungkinkan komponen Tautan nextjs mendukung ini atau Anda dapat membuat Komponen Tautan nextjs versi Anda sendiri yang berfungsi dengan komponen gaya. Tanpa melihat kode tautan, itu hanya terdengar seperti tidak meneruskan alat peraga apa pun ke elemen jangkar.

Anda dapat membuat sendiri dengan mengimpor Router nextjs dan kemudian mengizinkan komponen yang ditata untuk menata gaya komponen https://www.styled-components.com/docs/basics#styling -any-components

Berikut adalah contoh singkatnya, saya hanya menulis kode ini di sini secara langsung dan belum mengujinya jadi gunakan saja sebagai contoh.

// 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;

Pendekatan yang baik @kennylavender tapi saya rasa itu tidak cukup baik, karena Anda tidak merender atribut href (sebagai gantinya Anda menggunakan acara onClick ). Jadi... Seberapa baik pendekatan ini untuk SEO? Alternatif lain?

Ini hanya sebuah contoh Anda harus mengambil lebih jauh. Anda dapat dan pasti harus menambahkan atribut href di atas kode yang saya posting. Lihatlah bagaimana nextjs/link diimplementasikan untuk mendapatkan ide tentang bagaimana melakukannya.

Hai teman-teman. Pada versi 3.0.1-beta.13+ , Anda dapat mengatur passHref ke Link (sebagai properti boolean) untuk mengekspos href ke styled-components (atau perpustakaan lain yang membungkusnya <a/> ).

Menggunakan contoh masalah pertama: bisa dilakukan dengan cara ini:

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

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

FYI: Jika Anda menggunakan next-routes akan terlihat seperti ini:

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

Solusi @vjpr yang ditingkatkan, melewati prop className langsung ke Link kami sehingga kami dapat memperluas gaya mereka dalam cakupan yang benar:

Link.js

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

Komponen lain.js

import Link fron 'components/Link';

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

Versi @torresandres yang sedikit ditingkatkan, menata tautan di dalam komponen sehingga kita tidak perlu membuat komponen bergaya di setiap komponen yang kita impor 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>
);

Komponen lain.js

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

Apakah ada alasan khusus mengapa className tidak tersedia sebagai pendukung untuk Tautan? Saya ingin membuat PR untuk menambahkan itu, tetapi saya pikir pasti ada alasan mengapa itu tidak diperbolehkan.

Menemukan jawabannya!
https://github.com/zeit/next.js/pull/1642#issuecomment -292431043

untuk orang-orang yang ingin mengubah gaya Tautan dengan komponen gaya

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

maka Anda dapat menggunakan seperti ini <LinkItem to="/yourComponent">somthing</LinkItem>

Butuh beberapa waktu untuk mencari tahu, jadi saya akan menulis TLDR

TLDR Tambahkan passHref ke tag <Link> Anda dan sertakan komponen gaya yang Anda inginkan di dalamnya

Contoh Praktis
Dalam Komponen Induk:

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

Dalam file komponen bergaya yang mendefinisikan TopbarLink:

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

@ferrucci-io Contoh Anda membungkus jangkar di dalam jangkar. Dan juga biasanya Anda mungkin perlu memposisikan Tautan. Yang membawa masalah awal sebagai masalah batin yang ditata.