Reagir/NextJS de roteamento de prop para um neto do componente de Link não está funcionando

0

Pergunta

Eu sou o tipo de preso... e não consigo descobrir se esse é um problema com NextJS.

Eu tenho três componentes:

  • CardsList (listas de todos os cartões - tem vários <Card> crianças)
  • Cartão (representação de um cartão, tem uma <Button> criança)
  • Botão Exibe um botão na placa - usa <Link> componente)

Botão componente contém um nextjs/componente de ligação.

Eu preciso passar o link para o artigo do CardsList, através de Cartão, em que o Botão (e aqui no meu <Link>'s href)...

Isso funciona perfeitamente, se eu passar o link (e.g. /mytest) directamente a partir do Cartão de Botão... Ele também mostra a Seqüência de caracteres quando eu via-o a partir CardsList, através de Cartão no botão imprimir na tela - sim, eu posso ver o seu valor... mas ele não funciona quando eu faço isso:

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

Sim, {text} trabalha - se também passado do avô componente (CardsList). Mas o componente de Ligação não aceita o passado prop se ele não foi diretamente enviados a partir de seu diretas principal componente! (Sim, ele funciona, se eu passar a Seqüência de caracteres de apenas um nível, mas se ele é passado do CardsList (e acabou de passar através de) não serão aceitas!)

Não processada Erro de tempo de execução Erro: Falha prop tipo: prop href espera um string ou object no <Link>, mas tenho undefined em vez disso.

E sim, eu sei, eu poderia usar o gerenciamento de estado, mas eu não quero para configurar todo o estado de gestão para isso - como ele não terá em nenhum outro lugar.

Muito obrigado antecipadamente, pessoal!

Sascha

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

Melhor resposta

0

Eu "fixo" (e não de orgulho!) apenas criando outra Seqüência de caracteres antes de passar a prop para o componente de ligação.

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

Isso é estranho... e talvez eu vou encontrar a razão pela qual no futuro.

Greetz,

Sascha

2021-11-15 07:50:43

Em outros idiomas

Esta página está em outros idiomas

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