Блог

У меня есть список карточек, на которых показаны фильмы / телепередачи. Что мне нужно, так это то, что когда я нажимаю на карту, она перенаправляет меня на новую страницу (страница сведений), где я могу увидеть детали этого конкретного фильма / карты.

Мой card.js и card-collection.js являются:

карта :

 import React from 'react';
import './card.styles.css';

const Card = ({ item }) => (
  <div className='card-container'>
    <div
      className='image'
      style={{
        backgroundImage: `url(https://image.tmdb.org/t/p/w1280${item.backdrop_path})`,
      }}
    ></div>
    <div className='basic-info'>
      {item.name ? (
        <p className='title'>{item.name}</p>
      ) : (
        <p className='title'>{item.title}</p>
      )}

      {item.first_air_date ? (
        <p className='title'> {item.first_air_date.substring(0, 4)}</p>
      ) : (
        <p className='title'>{item.release_date.substring(0, 4)} </p>
      )}
    </div>
  </div>
);

export default Card;
  

коллекция карт:

 import React from 'react';
import Card from '../card/card.component';
import './card-collection.styles.css';

class CardCollection extends React.Component {
  goToDetails = (item) => {
    localStorage.setItem('selectedItem', item);
    this.props.history.push('/details');
  };

  render() {
    console.log('PROPOVI SUUU', this.props);
    return (
      <div className='card-collection'>
        {this.props.items.data
          .filter((item, idx) => idx < 10)
          .map((item) => (
            <Card
              key={item.id}
              item={item}
              onClick={() => this.goToDetails(item)}
            />
          ))}
      </div>
    );
  }
}

export default CardCollection;
  

Я пробовал несколько вещей, но, похоже, я не могу передать реквизиты своей карты (я могу работать только с идентификатором, если ничего другого), но я не смог отправить эту информацию через или что-то еще, что я пробовал.

Вам нужно обернуть компонент вашей карты тегами ссылок с указанным маршрутом.

<Link to="details/${id}"> <Card props={props} /> </Link>

Документы реагируют-ссылка на маршрутизатор

Вы передаете onClick событие в качестве поддержки Card компоненту. Это не приведет к захвату события щелчка по элементу карты в списке. Попробуйте обернуть Card компонент в элемент, который будет фиксировать щелчок. Что-то вроде этого должно работать:

 <div onClick={() => this.goToDetails(item)}>
    <Card key={item.id} item={item} />
</div>