Réagir/NextJS de routage prop à un petit-enfant, Lien composant ne fonctionne pas

0

La question

Je suis un peu coincé... et ne peut pas déterminer si c'est un problème de NextJS.

J'ai trois composantes:

  • CardsList (listes de toutes les cartes - a plusieurs <Card> enfants)
  • Carte (représentation d'une carte - a un <Button> enfant)
  • Bouton (Affiche un bouton dans la fiche utilise <Link> composant)

Bouton composant contient une nextjs/lien composant.

J'ai besoin de passer sur le lien à l'article de la CardsList, par le biais de la Carte, en Bouton (et ici, dans mon <Link>s 'href)...

Cela fonctionne parfaitement si je passe le lien (ex: /mytest) directement à partir de la Carte de Bouton... Il montre également la Chaîne quand je itinéraire à partir de CardsList, par le biais de la Carte de bouton juste à l'imprimer sur l'écran - oui, je peux voir sa valeur... mais il ne fonctionne pas quand je fais ceci:

export default function Button({ text, link }) {
  return (
    <Link href={link} passHref>
      <button className="bg-transparent hover:bg-primary text-link font-semibold hover:text-white py-1 px-3 border border-link hover:border-transparent rounded self-center" >
        {text}
      </button>
    </Link>
  );
}

Oui, {text} œuvres - aussi passé de le grand-parent du composant (CardsList). Mais le Lien composant ne pas accepter le passé prop si elle n'a pas été directement envoyés à partir de son parent direct de composant! (Oui, il fonctionne, si je passe la Chaîne à un seul niveau, mais si il est passé de l'CardsList (et vient de passer à travers) il ne sera pas accepté!)

Non gérée Erreur d'Exécution d'Erreur: Échec de la prop type: Le type de prop href attend un string ou object dans <Link>, mais j'ai reçu undefined au lieu de cela.

Et oui, je sais, je pourrais utiliser la gestion de l'état, mais je ne veux pas configurer l'ensemble de la gestion de l'état pour que, comme il n'en aurez pas besoin n'importe où ailleurs.

Je vous remercie beaucoup à l'avance, les gars!

Sascha

hyperlink next.js reactjs
2021-11-14 14:16:17
1

La meilleure réponse

0

J'ai "fixé" (pas fière de l'être!) par la simple création d'une autre Chaîne de caractères avant de passer l'hélice pour le lien de la composante.

export default function Button({ text, link }) {
  return (
    <Link href={`${link}`} passHref>
      <button className="bg-transparent hover:bg-primary text-link font-semibold hover:text-white py-1 px-3 border border-link hover:border-transparent rounded self-center" >
        {text}
      </button>
    </Link>
  );
}

C'est bizarre... et je vais peut-être trouver la raison pour laquelle à l'avenir.

Greetz,

Sascha

2021-11-15 07:50:43

Dans d'autres langues

Cette page est dans d'autres langues

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................