Reagire/NextJS di routing elica nipote di Collegamento del componente non funziona

0

Domanda

Io sono un po ' bloccato... e non riesco a capire se questo è un problema con NextJS.

Ho tre componenti:

  • CardsList (elenca tutte le carte - ha più <Card> bambini)
  • Carta (rappresentazione di una carta ha un <Button> bambino)
  • Pulsante (Visualizza un pulsante nella scheda - usa <Link> componente)

Pulsante componente contiene un nextjs/link componente.

Ho bisogno di passare il link dell'articolo da CardsList, attraverso la Carta, in un Pulsante (e qui nel mio <Link>'s href)...

Questo funziona perfettamente se mi passa il link (ad esempio /mytest) direttamente dalla Scheda Pulsante... inoltre, mostra la Corda quando ho percorso da CardsList, tramite il Card in un pulsante solo per stampare sullo schermo - sì, posso vedere il suo valore... ma non funziona quando faccio questo:

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

Sì, {text} opere - anche passato dal nonno componente (CardsList). Ma il Link componente non accettare il passato prop, se non sia stato direttamente inviato dal suo diretto componente principale! (Sì, funziona, se mi passa la Stringa di un solo livello, ma se è passato dal CardsList (e appena passato attraverso) non saranno accettati!)

Non gestita Errore di Runtime Errore: Impossibile prop tipo: La prop href si aspetta un string o object in <Link>, ma ha ottenuto undefined invece.

E sì, so che avrei potuto utilizzare per la gestione dello stato, ma non voglio impostare tutta la gestione dello stato, e questo non ha bisogno in qualsiasi altro luogo.

Vi ringrazio molto in anticipo, ragazzi!

Sascha

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

Migliore risposta

0

Ho "risolto" (non di orgoglio!) da solo la creazione di un'altra Stringa prima di passare il puntello per il collegamento component.

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

Questo è strano... e forse riuscirò a trovare il motivo per cui in futuro.

Greetz,

Sascha

2021-11-15 07:50:43

In altre lingue

Questa pagina è in altre lingue

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