时间戳

首页 > 解决方案 > 反应路由器 - 单击卡并重定向到包含该卡内容的新页面（卡详细信息）

reactjs - 反应路由器 - 单击卡并重定向到包含该卡内容的新页面（卡详细信息）

问题描述

我有一张显示电影/电视节目的卡片列表。我需要的是当我点击一张卡片时，它会将我重定向到一个新页面（详细信息页面），我可以在其中查看该特定电影/卡片的详细信息。

我的 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;

我尝试了多种方法，但我似乎无法传递我的卡片道具（如果没有别的，我只能使用 id），但我无法通过我尝试过的任何其他方式发送该信息。

标签： reactjs

解决方案

您需要使用具有指定路线的 Link 标签包装您的 Card 组件。

<Link to="details/${id}"> <Card props={props} /> </Link>
文档 react-router 链接

推荐阅读