web-dev-qa-db-fra.com

Le lien externe ne fonctionne pas dans Next.js lorsque vous souhaitez utiliser le composant Link

J'ai été très surpris qu'un simple composant Link ne fonctionne pas dans Next.js lorsque vous souhaitez utiliser une URL externe et HTML Button tag à l'intérieur.

Ci-dessous, vous pouvez voir comment j'ai essayé de résoudre le problème:

Numéro d'approche 1 :

<Link href="https://stackoverflow.com/">
  <button>StackOverflow</button>
</Link>

Numéro d'approche 2 (lien sans protocole):

<Link href="//stackoverflow.com/">
  <button>StackOverflow</button>
</Link>

Numéro d'approche 3 (lien sans protocole et avec l'attribut Link prefetch mis à false ou même true):

<Link href="//stackoverflow.com/" prefetch={false}>
  <button>StackOverflow</button>
</Link>

REMARQUE IMPORTANTE

Bien sûr, le cas mentionné fonctionne lorsque l'URL est interne, comme ça:

<Link href="/stackoverflow">
  <button>StackOverflow</button>
</Link>

ou quand je changerai la balise de bouton HTML en balise HTML A , comme ça:

<Link href="//stackoverflow.com/">
  <a>StackOverflow</a>
</Link>

Dans mon cas, je souhaite utiliser la balise de bouton HTML ou tout autre composant d'interface utilisateur à l'intérieur du composant Next.js Link.

javascripthtmljsxnext.jsuicomponents
4
Mario Boss

1. Solution pour les composants d'interface utilisateur à l'intérieur du composant Next.js Link.

J'ai étudié la documentation Next.js plus en détail et j'ai trouvé un attribut très utile pour créer un lien externe pour tous les composants internes de l'interface utilisateur ( Semantic UI , Material UI , - Reactstrap , etc.) à l'intérieur du composant Link.

Prenons comme exemple un simple composant de bouton d'interface utilisateur sémantique. Pour ajouter un lien externe vers le composant Next.js Link, nous devons utiliser l'attribut passHref . Cet attribut est défini sur false par défaut. Cet attribut force Link à envoyer la propriété href à son enfant.

import { Button } from 'semantic-ui-react';
import Link from 'next/link';    

const Example = () => (
  <Link href="https://stackoverflow.com/" passHref={true}>
    <Button>StackOverflow</Button>
  </Link>
)

export default Example;

2. Solution pour les éléments HTML (différents de la balise A)

Dans la documentation de Next.js, vous pouvez trouver les phrases ci-dessous:

Les URL externes et tous les liens qui ne nécessitent pas de navigation d'itinéraire à l'aide de/pages, n'ont pas besoin d'être gérés avec Link; utilisez plutôt la balise d'ancrage pour de tels cas.

Et je dois écrire que c'est évident, donc dans ce cas, si vous devez utiliser une autre balise, par exemple, un bouton HTML, vous devez utiliser l'événement onClick dessus sans composant Link. Le code ci-dessus ressemblera à ceci:

const clickHandle = () => {
  document.location.href = 'https://stackoverflow.com/';
}

const Example = () => (
  <button onClick={clickHandle}>StackOverflow</button>
)

export default Example;

J'espère que ce genre d'explication et d'approche aidera quelqu'un qui sera aux prises avec des confusions similaires.

5
Mario Boss

Le composant Link sert uniquement à créer des liens entre les pages de votre application Next. La transmission d'une URL externe n'est pas un comportement pris en charge et devrait vous donner une erreur qui renvoie à cette page , qui inclut cette section:

Pourquoi cette erreur s'est produite

Next.js fournit un routeur qui peut être utilisé via un composant importé via next/link, un wrapper withRouter (Component), et maintenant un hook useRouter (). Lors de l'utilisation de l'un de ces éléments, il est prévu qu'ils ne soient utilisés que pour la navigation interne, c'est-à-dire pour naviguer entre les pages de la même application Next.js.

Soit vous avez passé un href non interne à un composant suivant/link, soit vous avez appelé Router # Push ou Router # replace par un.

Les hrefs non valides incluent les sites externes ( https://google.com ) et mailto: links. Dans le passé, l'utilisation de ces hrefs invalides pouvait passer inaperçue, mais puisqu'elles peuvent provoquer un comportement inattendu. Nous montrons maintenant un avertissement en développement pour eux.

Si vous affichez un <a> à l'intérieur, le href est transmis à cela et fonctionne comme prévu en utilisant le comportement natif du navigateur, mais d'autres éléments ne peuvent pas l'utiliser, vous devrez donc gérer ce cas vous-même.

Je vous suggère de regarder ce que vous essayez d’obtenir: quel est le problème avec l’utilisation d’un <a> tag? Cela semble être le bon outil pour le travail.

0
velvetkevorkian