Reaccionar/NextJS de enrutamiento de la proposición a un nieto del Enlace componente no funciona

0

Pregunta

Estoy un poco atascado... y no se puede averiguar si esto es un problema con NextJS.

Tengo tres componentes:

  • CardsList (listas de todas las tarjetas - tiene múltiples <Card> niños)
  • Tarjeta (representación de una tarjeta tiene una <Button> niño)
  • Botón (Muestra un botón en la tarjeta de usos <Link> componente)

Botón de componente contiene una nextjs/link componente.

Necesito pasar el enlace para el artículo de la CardsList, a través de la Tarjeta, en el Botón (y aquí en mi <Link>'s href)...

Esto funciona perfectamente si me pasan el enlace (por ejemplo, /mytest) directamente desde la Tarjeta a Botón... también Se muestra la Cadena cuando la ruta de CardsList, a través de la Tarjeta en el botón imprimir en la pantalla - sí, puedo ver su valor... pero no funciona cuando hago esto:

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} las obras - que también pasaron desde que el abuelo componente (CardsList). Pero el Enlace en el componente de no aceptar el pasado de la proposición si no se envía directamente a partir de su matriz directa de componentes! (Sí, funciona, si me pasan la Cadena de un solo nivel -, pero si se pasa de la CardsList (y pasó por en medio) no será aceptado!)

No controlada Error de tiempo de ejecución Error: Error de la proposición: La proposición href espera un string o object en <Link>pero me undefined en su lugar.

Y sí, yo sé, yo podría utilizar el estado de la gestión, pero no quiero instalar todo el estado de la gestión de este, ya que no tendrá en ningún otro lugar.

Muchas gracias de antemano, chicos!

Sascha

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

Mejor respuesta

0

He "arreglado" (no se siente orgulloso!) por la creación de otra Cadena antes de aprobar la proposición para el enlace de los componentes.

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

Esto es raro... y tal vez voy a encontrar la razón de por qué en el futuro.

Saludos,

Sascha

2021-11-15 07:50:43

En otros idiomas

Esta página está en otros idiomas

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