Next.js: Link als gestylte Komponente

Ich hatte genau das Problem bei der Verwendung eines a -Tags ohne ein href -Attribut in Chrome. Es ist nicht als Link gestaltet und verfügt nicht über die Barrierefreiheitsfunktionen des Browsers eines regulären Links. Was funktionierte, war die Verwendung eines leeren href im Tag a .

Auch das zu erleben.

Für die Problemumgehung Es ist wahrscheinlich eine bessere Idee, die href ein zweites Mal einzufügen, anstatt sie leer zu lassen. Wenn auch nur für die Browser-URL-Vorschau.

Sie können eine Komponente an styledcomponents übergeben, anstatt ein Tag zu verwenden
https://github.com/styled-components/styled-components#third-party-components

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

Benutze es

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

Danke @kennylavender , werde das versuchen!

@sedubois hat das funktioniert? Sie können className nicht an einen Link übergeben, daher glaube ich nicht, dass es funktionieren wird

@luisrudge habe es noch nicht versucht, im Moment war die Problemumgehung gut genug und ich werde es noch einmal versuchen, um zu sehen, ob ich styled-jsx direkt verwenden kann ...

Wenn Sie bestätigen, dass es nicht funktioniert, lassen Sie es mich wissen und ich kann es wieder öffnen.

@sedubois Ich kann bestätigen, dass die Lösung von @kennylavender nicht funktioniert. Ich würde empfehlen, dieses Thema erneut zu öffnen.

Es könnte eine Pull-Anforderung gestellt werden, damit die Nextjs-Link-Komponente dies unterstützt, oder Sie könnten Ihre eigene Version der Nextjs-Link-Komponente erstellen, die mit styledcomponents funktioniert. Ohne auf den Linkcode zu schauen, hört es sich einfach so an, als würden keine Requisiten an das Ankerelement weitergegeben.

Sie könnten Ihre eigene erstellen, indem Sie den nextjs-Router importieren und dann styledcomponents erlauben, die Komponente https://www.styled-components.com/docs/basics#styling -any-components zu stylen

Hier ist ein kurzes Beispiel, ich habe diesen Code hier nur direkt geschrieben und nicht getestet, also benutze ihn nur als Beispiel.

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

Guter Ansatz @kennylavender , aber ich denke nicht, dass es gut genug ist, weil Sie das Attribut href nicht rendern (Sie verwenden stattdessen das Ereignis onClick ). Also... Wie gut ist dieser Ansatz für SEO? Andere Alternativen?

Es ist nur ein Beispiel, Sie sollten es weiter ausführen. Sie können und sollten auf jeden Fall ein href-Attribut auf den von mir geposteten Code setzen. Schauen Sie sich an, wie nextjs/link implementiert ist, um eine Vorstellung davon zu bekommen, wie das geht.

Hallo Leute. In der Version 3.0.1-beta.13+ könnten Sie passHref auf Link (als boolesche Eigenschaft) setzen, um href für styled-components (oder jede andere Bibliothek, die seine <a/> -Tag).

Unter Verwendung des ersten Problembeispiels: Es könnte so gemacht werden:

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

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

FYI: Wenn Sie next-routes verwenden, würde es so aussehen:

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

Verbesserte @vjpr- Lösung, Umgehung der className -Prop direkt zu unserem Link , damit wir ihre Stile im richtigen Umfang erweitern können:

Link.js

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

Eine andere Komponente.js

import Link fron 'components/Link';

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

Eine leicht verbesserte Version von @torresandres , die den Link innerhalb der Komponente gestaltet, sodass wir nicht in jeder Komponente, in die wir Link importieren, eine gestaltete Komponente erstellen müssen.

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

Eine andere Komponente.js

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

Gibt es einen bestimmten Grund, warum className nicht als Requisite für Link verfügbar ist? Ich würde gerne eine PR machen, um das hinzuzufügen, aber ich denke, es muss einen Grund geben, warum das nicht erlaubt ist.

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

für Leute, die den Stil von Link mit styled-components ändern möchten

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

dann kannst du so <LinkItem to="/yourComponent">somthing</LinkItem> verwenden

Ich habe einige Zeit gebraucht, um das herauszufinden, also schreibe ich eine TLDR 👇

TLDR Fügen Sie Ihrem <Link> -Tag passHref hinzu und fügen Sie die gewünschten Stilkomponenten darin ein

Praktisches Beispiel
In übergeordneter Komponente:

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

In der formatierten Komponentendatei, die TopbarLink definiert:

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

@ferrucc-io Ihr Beispiel umschließt Anker innerhalb eines Ankers. Und normalerweise müssen Sie möglicherweise den Link positionieren. Was das anfängliche Problem mit sich bringt, da es das innere ist, das gestylt ist.