Как передать перменную из одного компонента в другой в Next.JS?

Question

[maxemga]

Нужно взять одну переменную из одного компонента и отобразить на другом, но передача Contex-ом не получится, ибо в ветке компонентов у меня просо нету того компонета куда нужно передать перменную.

Я нажимаю на карточку и открывается по ссылке другая страница где нужно передать имя данной карточки.

const OperatorCardsPage: React.FC = () => {
  const [operators, setOperators] = useState<any[]>();
  const { request } = useHttp();
  
  const Responce = async () => {
    const data: any = await request('/api/render');
    setOperators(data);
  }

  useEffect(() => {
    Responce();
  }, [])

  return (
    <OperatorsBlock>
     
      {operators && operators.map(element => (
       <Link href="/OperatorsPaymentPage"><A><OperatorCard nameImage={element.image} title={element.title}></OperatorCard></A></Link>
      ))}

    </OperatorsBlock>
     
  );
}

Переменную props.title из этого компонента нужно передать:

const OperatorCard: React.FC<OperatorCard> = (props: any) => {

  return (

      <Card>
        <Icon src ={`/images/operators/${props.nameImage}`} alt="" /> 
        <Title>{props.title}</Title>
      </Card>
    
  );
}

Answer 1

[Константин Артюшкевич]

<Link href="/OperatorsPaymentPage">....
В данном случае для всех карточек ссылка одна и та же проставляется на статическую страницу /OperatorsPaymentPage. А нужно, я так понимаю, на конкретную карточку. Для этого нужно сделать динамическую ссылку, но т.к. я не знаю, какая у вас схема данных, то просто напишу шаблон:
<Link href={`/operators/${element.id}`}> ...